Navigasi Keyboard dan Fokus Visual yang Sempurna | Disabilitas.com

Navigasi Keyboard dan Fokus Visual: Memandu Pengguna Tanpa Mouse

Bagi banyak pengguna—termasuk penyandang disabilitas motorik, penderita tremor, atau sekadar individu (power user) yang lebih memilih efisiensi—keyboard adalah satu-satunya alat navigasi yang mereka miliki. Jika sebuah situs web tidak dapat dioperasikan sepenuhnya menggunakan keyboard, situs tersebut pada dasarnya rusak.

Mengadaptasi pedoman dari Practical Web Accessibility oleh Ashley Firth (Bab 4: Motor Impairments), artikel ini akan membahas anatomi navigasi keyboard, bahaya memanipulasi tabindex, dan mengapa indikator fokus visual adalah nyawa dari interaksi non-mouse.

Insight Terkait

Aksesibilitas pada Aplikasi Single Page (SPA: React & Vue)

1. Urutan Tabulasi (DOM Order) vs Urutan Visual

Saat pengguna menekan tombol Tab, browser memindahkan fokus secara berurutan melalui elemen-elemen yang interaktif (tautan, tombol, input formulir) berdasarkan letaknya di dalam kode HTML (Document Object Model atau DOM).

Masalah muncul ketika desainer menggunakan CSS modern seperti flex-direction: row-reverse, order, atau float untuk memindahkan elemen secara visual ke arah yang berlawanan dengan urutan HTML-nya.

Bahaya yang Terjadi: Jika tombol "Batal" berada di kiri dan tombol "Kirim" berada di kanan secara visual, tetapi di dalam HTML tombol "Kirim" ditulis lebih dulu, pengguna keyboard akan secara tidak logis melompat ke "Kirim" terlebih dahulu. Ini melanggar Kriteria Sukses WCAG 2.4.3 (Focus Order).

Insight Terkait

Aksesibilitas di Era Baru: Virtual Reality (VR), Augmented Reality (AR), dan AI

Aturan Emas: Urutan visual sebuah halaman harus selalu sama dengan urutan elemennya di dalam DOM.

2. Memanipulasi Atribut `tabindex`

Atribut tabindex adalah alat yang kuat, tetapi sering disalahgunakan hingga merusak aksesibilitas. Ada tiga jenis penggunaan tabindex yang perlu Anda ketahui:

1. `tabindex="0"` (Menambahkan ke Urutan Tab)

Jika Anda terpaksa membuat elemen interaktif kustom menggunakan `

` atau `` (yang tidak kami sarankan), Anda harus menambahkan `tabindex="0"` agar elemen tersebut bisa menerima fokus keyboard. ```html

Kirim

```

2. `tabindex="-1"` (Menghapus dari Urutan Tab, namun bisa difokuskan via JS)

Ini sangat berguna untuk elemen wadah (container) seperti jendela Modal atau Dropdown. Elemen dengan `tabindex="-1"` tidak bisa dicapai dengan menekan tombol `Tab`, tetapi Anda bisa memindahkan fokus secara terprogram ke elemen tersebut menggunakan JavaScript (misalnya `element.focus()`).

3. `tabindex="1"` atau Lebih Besar (DILARANG KERAS)

Memberikan nilai `tabindex` positif (seperti `1`, `2`, `3`) akan memaksa elemen tersebut mendahului semua elemen interaktif lain di halaman, terlepas dari letaknya di dalam DOM. Ini akan menciptakan kekacauan total bagi pengguna Screen Reader dan pengguna keyboard karena kursor akan melompat secara acak di seluruh layar. Jangan pernah gunakan `tabindex` lebih dari nol.

3. Bahaya Keyboard Trap (Perangkap Keyboard)

Sesuai WCAG 2.1.2 (No Keyboard Trap), pengguna tidak boleh terjebak di dalam suatu elemen saat menavigasi menggunakan keyboard.

Insight Terkait

WAI-ARIA: Penyelamat atau Penghancur Aksesibilitas?

Keyboard trap paling sering terjadi pada:

Jendela Modal (Pop-ups)
Pemutar video pihak ketiga (seperti widget Flash lama atau iframe yang buruk).
Editor teks kaya (Rich Text Editors / WYSIWYG).

Jika pengguna menggunakan Tab untuk masuk ke dalam editor teks, tombol Tab di dalamnya sering kali diubah fungsinya menjadi penyisip ruang kosong (indent), sehingga pengguna tidak bisa keluar dari kotak teks tersebut. Anda harus selalu menyediakan jalan keluar (misalnya instruksi "Tekan Escape untuk keluar dari editor").

4. Indikator Fokus (Focus Ring)

Menghapus indikator fokus default browser tanpa menggantinya adalah dosa terbesar dalam desain front-end:

/<em> DOSA BESAR AKSESIBILITAS </em>/
*:focus { outline: none; }

Jika Anda melakukan ini, pengguna keyboard secara harfiah buta. Mereka tidak tahu di mana "kursor" mereka berada.

Solusi: `:focus-visible`

Banyak desainer menghapus outline karena mereka menganggap garis biru/hitam yang muncul saat mengeklik tombol dengan mouse itu "jelek". Solusi modernnya adalah pseudo-class `:focus-visible`.

/<em> Menghapus outline saat diklik dengan mouse </em>/
*:focus:not(:focus-visible) {
  outline: none;
}

/<em> Menampilkan outline tebal HANYA saat dinavigasi dengan keyboard </em>/
*:focus-visible {
  outline: 3px solid #ff5722;
  outline-offset: 4px;
}

5. Kesimpulan

Navigasi keyboard adalah landasan dari hampir semua teknologi asistif. Jika sebuah situs web tidak ramah terhadap keyboard, hampir dapat dipastikan situs tersebut juga tidak akan berfungsi dengan baik untuk pembaca layar, perintah suara, atau perangkat Switch. Jangan bergantung pada CSS untuk mengatur tata letak interaksi; percayakan pada struktur logika HTML murni Anda.

Referensi

Penjelasan teknis tentang DOM vs urutan visual, bahaya penggunaan atribut `tabindex` positif, dan penyelesaian masalah indikator fokus visual diekstrak langsung dari pemecahan masalah praktis dalam buku Practical Web Accessibility oleh Ashley Firth (Bab 4: Motor Impairments). Aturan Keyboard Trap merujuk pada ketentuan absolut dari standar WCAG Level A.

Bagaimana menurut Anda?

Berikan reaksi Anda pada artikel ini