Keyboard Navigation

Sebagian pengunjung tidak pernah menyentuh mouse: pengguna keyboard murni, pengguna pembaca layar, pengunjung yang tangannya memegang gelang bus. Bagi mereka, halaman kita adalah urutan tombol: maju, mundur, aktifkan, tutup. HTML native sudah memetakan semua itu — markup yang kurang cermat bisa merusak peta dalam sekejap.

Aturan dasarnya satu kalimat: apa pun yang bisa diklik dengan mouse harus bisa dijangkau dan diaktifkan dengan keyboard. Chapter ini membahas peta tombolnya, urutan fokusnya, dan satu atribut yang paling sering merusak keduanya.

Peta Keyboard Baku #

Interaksi halaman dijalankan lima tombol inti:

Elemen native menghormati peta ini sejak ditulis. Dialog dan Popover API dari Section Interactive Elements bahkan sudah menuntaskan semuanya: Esc menutup, fokus masuk saat dibuka, fokus kembali ke pemanggilnya saat ditutup — tanpa satu baris kode tambahan.

Urutan Fokus Mengikuti DOM #

Ini fakta yang sering mengejutkan: urutan Tab ditentukan urutan elemen di dalam markup, bukan posisinya di layar. Browser memfokuskan elemen sesuai urutan dokumen; CSS boleh memindahkan tampilan ke mana pun tanpa mengubah urutan fokusnya.

<form action="/pesan" method="post">
  <label for="nama">Nama penerima</label>
  <input type="text" id="nama" name="nama" required>

  <label for="alamat">Alamat pengiriman</label>
  <input type="text" id="alamat" name="alamat" required>

  <button type="submit">Kirim Pesanan</button>
  <button type="button">Kosongkan</button>
</form>

Mari kita bedah urutan fokus yang terbentuk:

1. Baris 2-3 (Nama penerima): perhentian Tab pertama — fokus ke input nama, labelnya ikut diumumkan.
2. Baris 5-6 (Alamat pengiriman): perhentian kedua — urutan layar dan markup sama; pengguna keyboard dan pengguna mouse bergerak paralel.
3. Baris 8-9 (dua button): perhentian ketiga dan keempat — Enter mengirim form pada Kirim, Space mengaktifkan Kosongkan.
4. Pola keseluruhan: bila style sheet memindahkan kolom Alamat ke atas, Tab tetap mengikuti markup — fokus melompat-lompat dan pengguna kehilangan arah. Solusinya membenahi markup, bukan menambalnya dengan atribut.

Jalankan sendiri peta tombolnya pada demo berikut — form yang sama dengan empat perhentian Tab:

Fokus berjalan persis mengikuti urutan markup: nama, alamat, Kirim, Kosongkan. Coba dua tombol inti lainnya: Enter saat fokus di tombol Kirim menahan pengiriman dan memunculkan peringatan (kolom masih kosong), dan Space saat fokus di tombol Kosongkan langsung membersihkan kedua kolom.

tabindex: Tiga Nilai Tiga Makna #

Atribut tabindex mengubah perilaku fokus — dan satu nilainya terkenal berbahaya:

Fokus Harus Terlihat #

Pengguna keyboard mengikuti cincin outline bawaan browser — satu-satunya penunjuk arah. Menghapusnya lewat CSS tanpa pengganti membuat setiap Tab menjadi tebakan. Kalau tampilan bawaannya kurang cocok dengan desain, ganti dengan penanda yang jelas — misalnya lewat :focus-visible — jangan sekadar menghapusnya.

Ringkasan #

• Lima tombol inti — Tab, Shift+Tab, Enter, Space, Esc — menjalankan seluruh interaksi; elemen native memetakannya otomatis.
• Urutan fokus mengikuti urutan DOM, bukan tampilan; CSS memindahkan visual tanpa memindahkan fokus.
• tabindex positif merusak urutan fokus — gunakan hanya 0 dan -1.
• Kursor fokus harus selalu terlihat; jangan menghapus outline tanpa pengganti.

Keyboard menuntaskan urusan operasi. Berikutnya kita periksa kalimat yang paling sering didengar pengguna pembaca layar: teks link.