Urutan visual di halaman mengikuti urutan DOM

Urutan tab yang logis penting bagi pengguna untuk mendapatkan pengalaman keyboard yang lancar. Pembaca layar dan teknologi pendukung lainnya menavigasi halaman dalam urutan DOM. Aliran informasi harus masuk akal.

Cara menguji secara manual

Untuk memeriksa apakah urutan tab aplikasi Anda sudah logis, coba gunakan tab di halaman Anda. Secara umum, fokus harus mengikuti urutan pembacaan, dari atas ke bawah halaman Anda. Di sebagian besar bahasa, urutan pembacaan bergerak dari kiri ke kanan. Di beberapa negara, seperti bahasa Arab dan Ibrani, urutan membaca bergerak dari kanan ke kiri.

Ada dua ide utama yang perlu diingat saat menilai urutan tab:

  • 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 balik layar, saat tab mengarahkan Anda ke konten yang tidak dimaksudkan untuk terlihat.

Pelajari lebih lanjut di Dasar-dasar akses keyboard.

Cara memperbaiki

Jika urutan fokus tampaknya salah, atur ulang elemen di DOM untuk membuat urutan tab lebih alami.

Hindari penggunaan CSS untuk memosisikan ulang elemen secara visual, karena pengguna teknologi pendukung akan mengalami navigasi yang tidak masuk akal. Alih-alih menggunakan CSS, pindahkan elemen ke posisi sebelumnya dalam DOM.

Jika konten di luar layar masih dapat diakses oleh kontrol keyboard, pertimbangkan untuk menghapusnya menggunakan tabindex="-1".

Pelajari lebih lanjut di Mengontrol fokus dengan tabindex.

Resource

Kode sumber untuk audit Urutan visual di halaman mengikuti urutan DOM