Kontrol interaktif dapat difokuskan pada keyboard

Periksa secara manual apakah semua kontrol kustom dapat difokuskan keyboard dan menampilkan indikator fokus. Urutan fokus elemen harus bertujuan untuk mengikuti urutan DOM. Jika Anda tidak yakin elemen mana yang harus menerima fokus, lihat modul fokus di kursus Pelajari Aksesibilitas di web.dev.

Cara menguji secara manual

Untuk menguji apakah kontrol kustom dapat difokuskan dan menampilkan indikator fokus, mulailah dengan menekan tombol tab di situs Anda. Gunakan TAB (atau SHIFT + TAB) untuk berpindah antar-kontrol, serta gunakan tombol panah dan ENTER dan SPACE untuk memanipulasi nilainya (lihat juga Dasar-dasar akses keyboard):

Apakah Anda dapat menjangkau semua kontrol interaktif di halaman? Apakah ada indikator fokus di setiap kontrol interaktif?

Cara memperbaiki

Jika tidak dapat menggunakan tombol tab untuk beralih ke semua elemen di halaman, Anda mungkin perlu menggunakan tabindex untuk meningkatkan kemampuan fokus kontrol tersebut.

Agar kontrol kustom dapat difokuskan, masukkan 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, pertimbangkan untuk menggunakan :focus agar selalu menampilkan indikator fokus. Terlepas dari apakah Anda menggunakan mouse atau keyboard untuk beralih ke tombol tersebut, 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 mengakses semua hal di layar. Pengalaman keyboard yang baik bergantung pada urutan tab yang logis dan gaya fokus yang dapat dikenali. Jika pengguna keyboard tidak dapat melihat atau mempelajari apa yang menjadi fokus, mereka tidak dapat berinteraksi dengan halaman.

Pelajari lebih lanjut di Cara melakukan Peninjauan Aksesibilitas.

Resource