Keyboard Navigation

Tidak semua pengunjung menyentuh mouse. Sebagian mengandalkan keyboard sepenuhnya, sebagian memakai perangkat bantu yang berperilaku seperti keyboard, dan sebagian lagi mengetuk Tab sambil bekerja karena lebih cepat. Halaman yang lengkap secara visual masih bisa gagal dipakai bila urutan fokusnya acak atau ada kontrol yang tak terjangkau. Chapter ini membahas tombol keyboard bawaan browser, urutan focus, atribut tabindex, dan syarat fokus yang selalu terlihat.

Siapa yang Mengandalkan Keyboard #

Kelompok pengguna keyboard itu luas dan tidak selalu kelihatan: pengunjung dengan gangguan motorik yang memakai keyboard satu tangan atau perangkat switch, pengguna screen reader yang mengoperasikan halaman lewat tombol, serta power user yang lebih cepat menekan Tab daripada memindah tangan ke mouse. Konsekuensinya, semua fitur halaman harus bisa dicapai dan dijalankan hanya dengan tombol. Ujiannya murah: sisihkan mouse, jelajahi halaman, dan setiap kontrol yang tak tercapai adalah temuan nyata.

Tombol Keyboard Bawaan Browser #

Browser membekali halaman dengan perilaku keyboard standar, dan tugas kita menjaganya tetap utuh:

Perhatikan perbedaan kecil yang sering ditanyakan: link dijalankan dengan Enter, sedangkan button bisa dijalankan dengan Enter maupun Space. Perilaku ini bawaan browser dan berlaku otomatis selama elemen yang dipakai tepat. Saat kontrol dibuat dari div, seluruh baris di atas hilang dan harus diprogram ulang.

Urutan Focus Mengikuti DOM #

Bila kita menekan Tab dari awal halaman, fokus berpindah mengikuti urutan elemen pada sumber dokumen, bukan posisi visualnya di layar. Urutan sumber itulah yang dibaca assistive technology, sehingga menulis HTML secara logis sekaligus menyelesaikan urutan focus. Penataan visual yang mengubah urutan tampilan tanpa mengubah sumber — misalnya lewat properti CSS tertentu — dapat membuat mata dan keyboard menempuh jalan berbeda; topik itu kita simpan untuk section HTML dan CSS.

Mengatur tabindex dengan Bijak #

Atribut global tabindex mengatur hubungan elemen dengan urutan Tab, dan perbedaan nilainya penting dipahami:

Contoh halaman berikut memakai tabindex="-1" sebagai target skip link, sisanya dibiarkan alami:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Uji Urutan Tab</title>
</head>
<body>
  <a href="#konten-utama">Langsung ke konten utama</a>
  <nav aria-label="Kategori katalog">
    <ul>
      <li><a href="www.example.com/bunga">Bunga</a></li>
      <li><a href="www.example.com/sayur">Sayur</a></li>
    </ul>
  </nav>
  <main id="konten-utama" tabindex="-1">
    <h1>Katalog Bibit</h1>
    <p>Pilih kategori filter untuk menampilkan bibit.</p>
    <button type="button">Tampilkan semua</button>
    <button type="button">Tersedia hari ini</button>
  </main>
</body>
</html>

Output yang Dihasilkan:

Menekan Tab berulang kali memindahkan fokus ke:
  1. "Langsung ke konten utama" (skip link)
  2. "Bunga"   (link di nav)
  3. "Sayur"
  4. "Tampilkan semua"   (button di main)
  5. "Tersedia hari ini"
Memilih skip link dengan Enter memindahkan fokus ke main yang tabindex="-1".

Mari kita bedah bagian pentingnya:

1. Baris 9 (a href="#konten-utama"): skip link berdiri paling awal, sehingga pengguna keyboard melewati menu panjang dalam satu tekan.
2. Baris 10-15 (nav + ul): dua link kategori menerima fokus sesuai urutan sumbernya, tanpa atribut tambahan.
3. Baris 16 (main tabindex="-1"): nilai -1 membuat main bisa menjadi target fokus saat skip link dijalankan, meski tak masuk urutan Tab biasa.
4. Baris 19-20 (button): kedua tombol filter menerima fokus secara alami; tidak ada tabindex positif yang mengacak urutan.

Skip link ini berpasangan dengan elemen main dari chapter Main pada section Semantic HTML. Pola lengkapnya memakai CSS agar link baru tampak saat menerima fokus, dan itu kita bahas setelah CSS diperkenalkan.

Focus Harus Selalu Terlihat #

Browser menggambar cincin tipis (outline) di sekitar elemen yang menerima fokus, dan penanda itu satu-satunya petunjuk posisi bagi pengguna keyboard. Menyembunyikannya dengan outline: none tanpa pengganti membuat pengguna kehilangan tempat berdiri. Bila ring bawaan dianggap kurang cocok dengan desain, penggantinya dibuat lewat CSS — topik section berikutnya, termasuk pemilih :focus-visible. Untuk kini, aturannya satu: jangan hapus penanda fokus.

Merangkum dengan Uji Tanpa Mouse #

Uji paling sederhana memakai empat langkah: tekan Tab dari awal halaman, pastikan setiap kontrol tercapai dengan cincin fokusnya terlihat, jalankan kontrol dengan Enter atau Space, lalu pastikan urutan berhentinya masuk akal. Satu kelemahan uji ini: fokus berpindah, tetapi kita belum memastikan setiap kontrol punya nama yang benar saat diumumkan. Persoalan nama itulah yang dibedah chapter berikutnya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Atribut global tabindex
• WHATWG — Fokus dan tabindex pada HTML Living Standard
• W3C — WCAG 2.2 Quick Reference

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Uji Urutan Tab</title>
</head>
<body>
  <a href="#konten-utama">Langsung ke konten utama</a>
  <nav aria-label="Kategori katalog">
    <ul>
      <li><a href="www.example.com/bunga">Bunga</a></li>
      <li><a href="www.example.com/sayur">Sayur</a></li>
    </ul>
  </nav>
  <main id="konten-utama" tabindex="-1">
    <h1>Katalog Bibit</h1>
    <p>Pilih kategori filter untuk menampilkan bibit.</p>
    <button type="button">Tampilkan semua</button>
    <button type="button">Tersedia hari ini</button>
  </main>
</body>
</html>