Kontrol interaktif kustom harus dapat difokuskan. Misalnya, jika Anda menggunakan
JavaScript untuk mengubah <div> menjadi drop-down yang menarik, drop-down tersebut tidak
otomatis dimasukkan ke dalam urutan tab yang benar.
Anda harus memeriksa secara manual bahwa semua kontrol kustom dapat difokuskan keyboard.
Jika memungkinkan, gunakan elemen HTML semantik yang memungkinkan interaksi.
Cara menguji
Untuk menguji apakah kontrol kustom dapat difokuskan,
tekan tombol TAB untuk menavigasi situs:
Apakah Anda dapat menjangkau semua kontrol interaktif di halaman?
Jika tidak, Anda mungkin perlu menggunakan tabindex untuk meningkatkan kemampuan fokus kontrol tersebut.
Lihat juga Mengontrol fokus dengan tabindex.
Cara memperbaiki
Agar kontrol kustom dapat difokuskan, masukkan 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 jelas. Jika pengguna keyboard tidak dapat melihat apa yang difokuskan, mereka tidak dapat berinteraksi dengan halaman.
Jika Anda baru mengenal pengujian aksesibilitas, sebaiknya pelajari pengujian aksesibilitas manual dan pengujian Teknologi Pendukung.