Kontrol kustom memiliki label terkait

Kontrol interaktif kustom harus dapat difokuskan. Jika Anda menggunakan JavaScript untuk mengubah <div> menjadi menu dropdown yang menarik, JavaScript tidak akan otomatis dimasukkan ke dalam urutan tab. Anda harus memeriksa secara manual apakah semua kontrol kustom dapat difokuskan pada keyboard. Lihat juga Dasar-dasar akses keyboard.

Cara menguji secara manual

Untuk menguji apakah kontrol kustom dapat difokuskan, tekan tombol TAB untuk membuka situs:

Apakah Anda dapat menjangkau semua kontrol interaktif di halaman? Jika tidak, Anda mungkin perlu menggunakan tabindex untuk meningkatkan fokus kontrol tersebut. Lihat juga Mengontrol fokus dengan tabindex.

Cara memperbaiki

Agar kontrol kustom dapat difokuskan, sisipkan elemen kontrol kustom ke dalam urutan tab alami menggunakan tabindex="0". Contoh:

<div tabindex="0">Focus me with the TAB key</div>

Mengapa ini penting

Bagi pengguna yang tidak dapat atau memilih untuk tidak menggunakan mouse, navigasi keyboard adalah cara utama untuk menjangkau semua yang ada di layar. Pengalaman keyboard yang baik bergantung pada urutan tab yang logis dan gaya fokus yang mudah terlihat. Jika pengguna keyboard tidak dapat melihat apa yang difokuskan, mereka tidak memiliki cara untuk berinteraksi dengan halaman.

Pelajari lebih lanjut di Cara melakukan Peninjauan Aksesibilitas.

Referensi