Banyak pengguna yang 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 adalah bagian penting dalam memberikan pengalaman navigasi keyboard yang lancar.
Cara menguji secara manual
Untuk memeriksa apakah urutan tab aplikasi Anda sudah logis, coba gunakan tab di halaman Anda. Urutan fokus elemen harus bertujuan untuk 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 kemampuan fokus kontrol tersebut.
Aturan umum adalah bahwa setiap kontrol yang dapat berinteraksi dengan pengguna atau memberikan input
harus dapat difokuskan dan menampilkan indikator fokus.
Jika pengguna keyboard tidak dapat melihat apa yang difokuskan, mereka tidak dapat berinteraksi dengan halaman.
Cara memperbaiki
Jika urutan fokus tampaknya salah, Anda harus mengatur ulang elemen di DOM agar urutan tab lebih alami.
Jika Anda tidak dapat menjangkau semua kontrol interaktif di halaman, perbaikan pertama yang dapat dilakukan adalah mengganti kontrol kustom dengan alternatif HTML standar.
Misalnya,
ganti <div> yang berfungsi seperti tombol dengan <button>.
Penggunaan elemen HTML bawaan dapat sangat meningkatkan aksesibilitas situs Anda,
dan secara signifikan mengurangi beban kerja Anda.
Jika Anda membuat komponen interaktif kustom tanpa HTML standar yang setara,
gunakan atribut tabindex untuk memastikan komponen tersebut dapat diakses dengan keyboard.
Contoh:
<div tabindex="0">Focus me with the TAB key</div>
Pelajari lebih lanjut di Mengontrol fokus dengan tabindex.
Resource
Kode sumber untuk audit Halaman memiliki urutan tab yang logis