Pastikan semua kontrol kustom memiliki role yang sesuai dan
atribut ARIA yang diperlukan yang memberikan properti dan status.
Misalnya, kotak centang kustom memerlukan role="checkbox" dan
aria-checked="true|false" untuk menyampaikan statusnya dengan benar.
Lihat Pengantar ARIA
untuk ringkasan umum tentang bagaimana ARIA dapat memberikan semantik yang tidak ada untuk kontrol khusus.
Cara menguji secara manual
Untuk memastikan semua kontrol interaktif kustom memiliki peran ARIA yang sesuai, uji halaman menggunakan panel aksesibilitas Chrome DevTools atau pembaca layar. JAWS dan NVDA adalah dua pembaca layar yang lebih populer untuk Windows. VoiceOver adalah pembaca layar bawaan MacOS.
Dengan CSS, Anda dapat
menata gaya elemen <div> dan <button> agar menyampaikan kemampuan visual yang sama,
tetapi kedua pengalaman tersebut sangat berbeda saat menggunakan pembaca layar.
<div> hanyalah elemen pengelompokan generik,
sehingga pembaca layar hanya membacakan konten teks <div>.
<button> diumumkan sebagai "tombol",
sinyal yang jauh lebih kuat bagi pengguna bahwa mereka dapat berinteraksi dengan sesuatu.
Lihat juga Semantik dan pembaca layar.
Cara memperbaiki
Solusi paling sederhana
dan sering kali terbaik untuk masalah ini
adalah menghindari kontrol interaktif kustom sama sekali.
Misalnya, ganti <div> yang bertindak seperti tombol
dengan <button> yang sebenarnya.
Jika Anda harus mempertahankan <div>,
tambahkan role="button" dan aria-pressed="false" ke <div>.
Sekarang pembaca layar akan mengumumkan peran dan status interaktif untuk <div>.
Mengapa ini penting
Satu-satunya cara untuk benar-benar memahami bagaimana pengalaman pengguna teknologi pendukung terhadap konten Anda adalah dengan memeriksa sendiri konten tersebut menggunakan pembaca layar. Menggunakan pembaca layar secara langsung akan memberi Anda pemahaman yang jelas tentang cara pelabelan konten, dan apakah ada halangan untuk navigasi teknologi pendukung. Jika Anda tidak terbiasa dengan cara penafsiran markup semantik oleh teknologi pendukung, lihat Pengantar Semantik untuk mengingat kembali.
Lihat juga Cara Melakukan Peninjauan Aksesibilitas.