Checkbox/Kotak Centang
Kontrol yang memungkinkan pengguna untuk mencentang dan tidak mencentang pilihan pada konten yang tersedia.
Checkbox yang Aksesibel (WCAG 2.2)
Harap terima syarat dan ketentuan
Membuat Checkbox Yang Aksesibel
- Gunakan elemen HTML semantik
- Gunakan kombinasi input[type='checkbox'] dan label yang tepat
- Sediakan status visual yang jelas (centang/silang)
- Pastikan dapat dioperasikan dengan keyboard
- Berikan feedback atau umpan balik saat perubahan status
Checkbox yang Tidak Aksesibel (Harap Dihindari)
Setujui Syarat dan Ketentuan
Harap terima syarat dan ketentuan
Contoh Implementasi Checkbox Yang Tidak Aksesibel
- Menggunakan div atau span sebagai checkbox custom, membuat elemen tersebut tidak bisa difokus atau diakses dengan keyboard
- Tidak ada status fokus dan hover, sehingga tidak ada indikator visual saat checkbox difokus atau dihover
- Tidak ada indikator yang jelas untuk status tercentang/tidak tercentang (checked/unchecked), baik secara visual maupun untuk pembaca layar
- Tidak menghubungkan checkbox dengan label menggunakan atribut 'for' dan 'id', sehingga label tidak bisa diklik untuk mengubah status checkbox
- Ukuran checkbox terlalu kecil dan sulit dilihat, atau terlalu dekat dengan konten lain sehingga sulit untuk diklik dengan tepat