SEGMENTASI SEMANTIK ELEMEN UI/UX UNTUK EVALUASI AKSESIBILITAS DESAIN DIGITAL

Abstract

Aksesibilitas antarmuka pengguna (User Interface/UI) merupakan aspek penting dalam pengembangan platform mobile dan web untuk memastikan seluruh pengguna, termasuk penyandang disabilitas, dapat mengakses layanan digital secara setara. Namun, proses evaluasi aksesibilitas yang  masih dilakukan secara manual umumnya membutuhkan waktu yang lama, biaya yang tinggi, serta berpotensi menghasilkan penilaian yang bersifat subjektif. Penelitian ini mengusulkan pendekatan otomatis berbasis deep learning menggunakan DeepLabV3+ dan backbone MobileNetV3-Large untuk melakukan segmentasi semantik lima kelas elemen UI, yaitu Background, Teks, Tombol, Gambar/Ikon, dan Navigasi. Dataset yang digunakan terdiri atas RICO yang memuat 10.000 citra antarmuka Android dan WebSRC yang berisi 1.000 citra antarmuka web. Pseudo-label dibangun secara otomatis melalui proses parsing view hierarchy berbasis JSON pada dataset RICO serta pendekatan heuristik berbasis computer vision pada dataset WebSRC. Pelatihan model menerapkan strategi progressive unfreezing backbone yang dikombinasikan dengan mekanisme reset counter pada early stopping guna meningkatkan stabilitas dan efektivitas proses pembelajaran model. Evaluasi performa dilakukan menggunakan Mean Intersection over Union (mIoU), Pixel Accuracy, dan Dice Coefficient. Hasil terbaik diperoleh pada epoch ke-83 dengan nilai mIoU sebesar 0,3537, Pixel Accuracy sebesar 0,6523, dan Mean Dice sebesar 0,4800. Kelas Navigasi menghasilkan nilai Intersection over Union tertinggi, yaitu 0,5652, sedangkan kelas Tombol mengalami peningkatan performa dari 0,1666 menjadi 0,2044 atau meningkat sebesar 22,7% dibandingkan model dasar (baseline). Hasil penelitian ini menunjukkan bahwa model yang dikembangkan berpotensi menjadi fondasi awal dalam membangun sistem evaluasi aksesibilitas antarmuka pengguna yang lebih otomatis, konsisten, dan efisien di masa mendatang.