Banyak pengguna yang berbeda mengandalkan keyboard untuk membuka aplikasi, mulai dari pengguna dengan gangguan motorik sementara dan permanen hingga pengguna yang menggunakan pintasan keyboard agar lebih efisien dan produktif. Urutan tab yang logis merupakan bagian penting dalam memberikan pengalaman navigasi keyboard yang lancar.
Cara menguji secara manual
Untuk memeriksa apakah urutan tab aplikasi Anda logis, coba tab pada halaman Anda. Urutan elemen difokuskan harus mengikuti urutan DOM. Secara umum, fokus harus mengikuti urutan pembacaan, bergerak dari kiri ke kanan, dari atas ke bawah halaman.
Pelajari lebih lanjut di Dasar-dasar akses keyboard.
Apakah Anda dapat menjangkau semua kontrol interaktif di halaman?
Jika tidak, Anda mungkin perlu menggunakan tabindex untuk meningkatkan fokus kontrol tersebut.
Aturan umumnya adalah setiap kontrol yang dapat berinteraksi dengan pengguna atau berikan input
harus dapat difokuskan dan menampilkan indikator fokus.
Jika pengguna keyboard tidak dapat melihat apa yang difokuskan, mereka tidak memiliki cara untuk berinteraksi dengan halaman.
Cara memperbaiki
Jika urutan fokus terlihat salah, Anda harus mengatur ulang elemen dalam DOM agar urutan tab lebih alami.
Jika Anda tidak dapat menjangkau semua kontrol interaktif pada halaman,
langkah pertama yang perlu dilakukan adalah mengganti kontrol kustom dengan alternatif HTML standar.
Misalnya,
ganti <div> yang bertindak seperti tombol dengan <button>.
Menggunakan elemen HTML bawaan dapat sangat meningkatkan aksesibilitas situs Anda,
dan secara signifikan mengurangi beban kerja Anda.
Jika Anda membuat komponen interaktif kustom tanpa padanan HTML standar,
gunakan atribut tabindex untuk memastikan bahwa komponen tersebut dapat diakses keyboard.
Contoh:
<div tabindex="0">Focus me with the TAB key</div>
Pelajari lebih lanjut di Mengontrol fokus dengan tabindex.
Referensi
Kode sumber untuk audit Halaman memiliki urutan tab yang logis