Kontrol interaktif dapat difokuskan pada keyboard

Dipublikasikan: 2 Mei 2019

Periksa secara manual bahwa semua kontrol kustom dapat difokuskan dengan keyboard dan menampilkan indikator fokus. Urutan elemen yang difokuskan harus mengikuti urutan DOM. Jika Anda tidak yakin elemen mana yang harus menerima fokus, lihat modul fokus dalam kursus Learn Accessibility 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, dan gunakan tombol panah serta 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 pada setiap kontrol interaktif?

Cara memperbaiki

Jika Anda tidak dapat berpindah antar-elemen di halaman dengan tombol tab, Anda mungkin perlu menggunakan tabindex untuk meningkatkan 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 kustom. 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 berpindah ke tombol tersebut, indikator fokus tombol 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 terlihat jelas. Jika pengguna keyboard tidak dapat melihat atau mempelajari apa yang menjadi fokus, mereka tidak dapat berinteraksi dengan halaman.

Pelajari lebih lanjut aksesibilitas di Learn Accessibility.

Resource