Urutan Tab Logis Mengikuti Konten

Tekan Tab dan fokus akan mengikuti rute tetap melalui halaman. Rute itu adalah urutan tab, dan mengaturnya dengan benar membantu pengguna tetap memahami posisinya. 🧭

Secara bawaan, urutan tab mengikuti urutan sumber, yaitu urutan elemen dari atas ke bawah dalam HTML, bukan urutan yang Anda lihat di layar.

Usahakan fokus bergerak dalam urutan yang sama seperti saat orang membaca halaman. Header terlebih dahulu, kemudian konten utama, lalu footer terasa alami.

Alat tata letak seperti flexbox order memindahkan kotak secara visual, tetapi tidak mengubah DOM. Fokus tetap mengikuti sumber, sehingga keduanya dapat tidak sesuai.

Saat CSS mengurutkan ulang item, pengguna papan ketik dapat berpindah mundur dan maju secara tidak terduga. Perbaikannya adalah menyelaraskan urutan HTML dengan urutan visual.

tabindex positif seperti 3 memaksa kontrol ke bagian depan urutan. Hampir selalu hal ini menciptakan kekacauan yang membingungkan dan sulit dipelihara.

Alih-alih menambal dengan tabindex, letakkan elemen dalam urutan yang benar di markup. Urutan sumber yang rapi tidak memerlukan atribut khusus.

Elemen dengan display none sepenuhnya keluar dari urutan tab. Tampilkan kembali elemen tersebut, dan elemen itu akan kembali ke posisi DOM-nya tanpa terlihat.

Saat JavaScript menyisipkan kontrol baru, kontrol tersebut muncul di tempat Anda menambahkannya. Sisipkan di posisi yang masuk akal agar urutannya tetap logis.

Dialog yang ditambahkan di akhir halaman dapat membuat fokus terjebak jauh dari tempat semestinya. Manajemen fokus yang baik mengarahkan pengguna ke dalam modal saat modal dibuka.

Buktinya sederhana. Tekan Tab dari bagian paling atas dan pastikan fokus berpindah dalam urutan yang masuk akal tanpa lompatan mengejutkan ke bagian lain layar.

Tentukan hal yang benar-benar mengatur urutan tab bawaan.

Jaga agar fokus berpindah seperti cara orang membaca. Sesuaikan urutan sumber dengan tata letak visual, hindari tabindex positif, dan uji hasilnya dengan Tab. ✅