Periksa secara manual apakah semua kontrol kustom dapat difokuskan di keyboard dan tampilkan indikator fokus. Urutan elemen difokuskan harus mengikuti urutan DOM. Jika Anda tidak yakin elemen mana yang harus menerima fokus, lihat Pengantar Fokus.
Cara menguji secara manual
Untuk menguji apakah kontrol kustom dapat difokuskan
dan menampilkan indikator fokus,
mulailah dengan menekan tombol tab pada situs Anda.
Gunakan TAB (atau SHIFT +
TAB) untuk berpindah antar-kontrol, serta gunakan tombol panah dan
ENTER serta SPACE untuk memanipulasi nilainya
(lihat juga Dasar-dasar akses keyboard):
Apakah Anda dapat menjangkau semua kontrol interaktif di halaman? Apakah ada indikator fokus pada setiap kontrol interaktif?
Cara memperbaiki
Jika tidak dapat melakukan tab pada semua elemen pada halaman,
Anda mungkin perlu menggunakan tabindex untuk meningkatkan fokus kontrol tersebut.
Agar kontrol kustom dapat difokuskan,
sisipkan elemen kontrol kustom ke dalam urutan tab alami menggunakan tabindex="0"
(lihat juga Mengontrol fokus dengan tabindex).
Contoh:
<div tabindex="0">Focus me with the TAB key</div>
Anda mungkin juga perlu menambahkan peran ARIA yang sesuai ke elemen kontrol khusus. Lihat Kontrol kustom memiliki peran ARIA.
Jika Anda tidak melihat indikator fokus,
sebaiknya gunakan :focus untuk selalu menampilkan indikator fokus.
Terlepas dari apakah Anda menggunakan mouse atau keyboard untuk menekan tombol tab,
indikator fokus tombol akan selalu terlihat sama
(lihat juga Fokus gaya).
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.