Menerapkan urutan tab yang logis adalah bagian penting dalam memberikan pengalaman navigasi keyboard yang lancar kepada pengguna. Pembaca layar dan teknologi pendukung lainnya menavigasi halaman dalam urutan DOM. Arus informasinya harus masuk akal.
Cara menguji secara manual
Untuk memeriksa apakah urutan tab aplikasi Anda logis, coba tab pada halaman Anda. Secara umum, fokus harus mengikuti urutan pembacaan, bergerak dari kiri ke kanan, dari atas ke bawah halaman.
Ada dua ide utama yang perlu diingat saat menilai urutan tab Anda:
- Apakah elemen dalam DOM disusun dalam urutan yang logis?
- Apakah konten di luar layar disembunyikan dengan benar dari navigasi?
Perhatikan setiap lompatan dalam navigasi yang tampak mengagetkan. Perhatikan juga lompatan di luar layar, di mana penggunaan tab membawa Anda ke konten yang seharusnya tidak terlihat.
Pelajari lebih lanjut di Dasar-dasar akses keyboard.
Cara memperbaiki
Jika urutan fokus terlihat salah, Anda harus mengatur ulang elemen dalam DOM agar urutan tab lebih alami.
Jika Anda telah menggunakan CSS untuk memosisikan ulang elemen secara visual, pengguna teknologi pendukung akan mengalami navigasi yang tidak masuk akal. Alih-alih menggunakan CSS, pindahkan elemen ke posisi sebelumnya di DOM.
Jika konten di luar layar masih dapat diakses oleh kontrol keyboard,
sebaiknya hapus menggunakan tabindex="-1".
Pelajari lebih lanjut di Mengontrol fokus dengan tabindex.
Referensi
Kode sumber untuk Urutan visual di halaman mengikuti audit urutan DOM