Halaman memiliki urutan tab yang logis

Banyak pengguna yang berbeda mengandalkan {i>keyboard <i} untuk menavigasi aplikasi, dari pengguna yang menderita gangguan motorik sementara dan permanen bagi pengguna yang menggunakan pintasan keyboard agar lebih efisien dan produktif. Urutan tab yang logis adalah bagian penting dalam memberikan pengalaman navigasi {i>keyboard<i} yang lancar.

Cara menguji secara manual

Untuk memeriksa apakah urutan tab aplikasi Anda logis, coba telusuri halaman Anda dengan menekan tombol tab. Urutan fokus elemen harus bertujuan untuk mengikuti urutan DOM. Secara umum, fokus harus mengikuti urutan membaca, bergerak dari kiri ke kanan, dari bagian atas ke bagian 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 umumnya adalah kontrol apa pun yang dapat berinteraksi dengan pengguna atau memberikan input ke 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 tampak salah, Anda harus menyusun ulang elemen di DOM untuk membuat urutan tab lebih alami.

Jika Anda tidak dapat menjangkau semua kontrol interaktif pada halaman, langkah pertama yang harus diperbaiki adalah mengganti kontrol khusus dengan alternatif HTML terstandardisasi. Misalnya, mengganti <div> yang bertindak seperti tombol dengan <button>. Menggunakan elemen HTML bawaan dapat sangat meningkatkan aksesibilitas situs Anda, dan mengurangi beban kerja Anda secara signifikan.

Jika Anda mem-build 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