Memakai halaman dengan papan ketik

Cabut tetikus lalu tekan Tab: setiap tautan, tombol, dan kolom harus menyala bergiliran, sesuai urutan kamu membaca halaman.

Siapa yang memakai papan ketik

Banyak orang tidak pernah menyentuh tetikus. Sebagian tidak bisa memegangnya dengan mantap; sebagian memakai sakelar, tongkat mulut, atau pengenal suara yang mengirim tekanan tombol; pengguna pembaca layar pun kebanyakan bergerak dengan papan ketik. Kriteria keberhasilan WCAG 2.2 2.1.1 Papan Ketik, pada level A, menyatakan bahwa semua yang ada di halaman harus bisa dijalankan dari papan ketik. Kriteria 2.1.2 Tanpa Jebakan Papan Ketik menambahkan bahwa kalau fokus bisa masuk ke suatu bagian halaman, fokus itu juga harus bisa keluar lagi dengan papan ketik.

Pakai elemen yang sudah berfungsi

Tautan dengan href, button, input, select, dan textarea bisa difokuskan sejak awal dan merespons tombol yang tepat. div dengan penangan klik tidak begitu: div tidak bisa dicapai dengan Tab, Enter tidak berbuat apa-apa, dan pembaca layar tidak mengumumkannya sebagai tombol. Nasihat MDN lugas. Jangan memakai tabindex untuk membuat div berlaku seperti tombol; pakai elemen button, yang sudah membawa peran dan perilaku papan ketiknya.

Urutan fokus dan tabindex

Urutan Tab mengikuti urutan elemen di sumber HTML. Kriteria 2.4.3 Urutan Fokus meminta agar urutan ini menjaga makna dan kegunaan halaman, jadi perbaikan paling sederhana untuk urutan yang aneh adalah menata ulang HTML-nya. MDN mencantumkan tiga jenis nilai tabindex. Nol memasukkan elemen ke urutan biasa. Nilai negatif, biasanya -1, mengeluarkannya dari urutan Tab tetapi tetap membolehkan skrip memanggil focus() padanya, yang berguna untuk dialog atau pesan galat. Nilai positif memaksa elemen mendahului semua yang lain, dan MDN menyarankan hanya memakai 0 dan -1, karena nilai positif membuat urutannya sulit diikuti.

Melihat posisimu

Pengguna papan ketik perlu melihat elemen mana yang sedang fokus. Kriteria 2.4.7 Fokus Terlihat, pada level AA, meminta penanda fokus yang terlihat, jadi aturan stylesheet seperti outline: none tanpa pengganti adalah kegagalan. WCAG 2.2 menambahkan dua kriteria terkait. 2.4.11 Fokus Tidak Tertutup (Minimum), pada level AA, menyatakan bahwa butir yang fokus tidak boleh tersembunyi sepenuhnya di balik sesuatu yang ditambahkan pembuat halaman, seperti footer lengket atau spanduk cookie. 2.5.8 Ukuran Target (Minimum), juga AA, meminta agar hal yang kamu klik atau ketuk berukuran sedikitnya 24 kali 24 piksel CSS, atau punya cukup ruang di sekitarnya.

Satu pola lagi sangat membantu: tautan lewati (skip link). Situs dengan menu panjang membuat pengguna papan ketik menekan Tab melewati setiap butir menu di setiap halaman. Tautan yang ditaruh paling awal di halaman, menuju isi utama, membuat mereka bisa melompatinya dengan satu tekanan tombol. Tautan ini bisa disembunyikan secara visual sampai menerima fokus.

Mengujinya cukup dua menit. Klik di bilah alamat, lalu tekan Tab berulang kali melewati seluruh halaman. Periksa bahwa setiap kontrol bisa dicapai, bahwa urutannya sesuai urutan baca, bahwa kamu selalu bisa melihat di mana fokus berada, dan bahwa Enter dan Space melakukan apa yang dilakukan klik tetikus. Lalu tekan Shift+Tab untuk kembali. Kontrol apa pun yang tidak bisa dicapai, atau tempat mana pun fokus menghilang, adalah bug.