Pastikan semua kontrol kustom memiliki role yang sesuai dan
atribut ARIA apa pun yang diperlukan yang memberi properti dan statusnya.
Misalnya, kotak centang kustom memerlukan role="checkbox" dan
aria-checked="true|false" untuk menyampaikan statusnya dengan benar.
Pelajari cara menggunakan ARIA dan HTML untuk memahami kapan sebaiknya memberikan semantik yang hilang untuk kontrol kustom.
Cara menguji
Untuk memeriksa apakah 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> untuk menyampaikan
affordance visual yang sama, tetapi pengalamannya sangat berbeda saat menggunakan pembaca
layar. <div> hanyalah elemen pengelompokan umum, sehingga pembaca layar hanya
mengumumkan konten teks <div>.
<button> diumumkan sebagai "tombol", sinyal yang jauh lebih kuat bagi pengguna
bahwa aplikasi tersebut dapat berinteraksi dengan mereka.
Lihat juga Semantik dan pembaca layar.
Cara memperbaiki
Solusi terbaik untuk masalah ini adalah menghindari kontrol interaktif kustom
sama sekali. Misalnya, ganti <div> yang berfungsi seperti tombol
dengan <button> yang sebenarnya.
<button>Learn more</button>
Jika Anda harus menggunakan <div>, tambahkan role="button" dan aria-pressed="false".
<div role="button" aria-pressed="false">Learn more</div>
Sekarang pembaca layar mengumumkan peran dan status interaktif untuk <div>.
Mengapa ini penting
Jika belum pernah menggunakan teknologi pendukung, Anda mungkin tidak mengetahui performa konten Anda bagi pengguna teknologi pendukung. Idealnya, Anda dapat berbicara dengan pengguna yang menggunakan teknologi pendukung secara rutin dan dapat memberikan masukan tentang performa situs atau aplikasi web Anda.
Cara lain untuk memahami pengalaman pengguna teknologi pendukung saat menggunakan konten Anda adalah dengan menguji dengan Teknologi Pendukung. Menggunakan pembaca layar membantu Anda memahami dengan lebih jelas cara pelabelan konten dan apakah ada gangguan pada navigasi.
Resource
Anda dapat melihat kode sumber untuk audit Kontrol kustom memiliki peran ARIA