Keyboard Navigation (Navigasi Keyboard)

TL;DR: Keyboard navigation adalah kemampuan mengakses dan mengoperasikan seluruh elemen website hanya menggunakan keyboard, terutama tombol Tab untuk berpindah, Enter atau Spasi untuk mengaktifkan, dan panah untuk komponen tertentu. Ini syarat dasar aksesibilitas: jika sebuah fitur tidak bisa dicapai tanpa mouse, sebagian pengguna akan tertutup aksesnya.

Apa itu Keyboard Navigation?

Keyboard navigation berarti setiap tautan, tombol, kolom isian, dan menu pada website bisa dijangkau dan dijalankan tanpa menyentuh mouse. Pengguna menekan Tab untuk maju ke elemen interaktif berikutnya, Shift+Tab untuk mundur, lalu Enter atau Spasi untuk memilih. Urutan perpindahan ini disebut tab order dan idealnya mengikuti alur baca yang logis dari atas ke bawah.

Kemampuan ini bertumpu pada penggunaan HTML semantik yang benar. Elemen seperti button dan a sudah bisa difokus keyboard secara bawaan, sedangkan div yang dipaksa jadi tombol biasanya tidak. Keyboard navigation juga merupakan fondasi pengalaman bagi pengguna pembaca layar, yang menelusuri halaman lewat keyboard, bukan kursor.

Indikator Implementasi yang Baik

• Focus indicator terlihat: ada garis atau bingkai jelas pada elemen yang sedang aktif, jangan dihilangkan dengan outline: none tanpa pengganti.
• Tab order logis: urutan fokus mengikuti urutan visual, tidak melompat acak.
• Tidak ada keyboard trap: pengguna selalu bisa keluar dari komponen apa pun (misalnya modal) dengan keyboard.
• Skip link tersedia: tautan untuk melompati navigasi langsung ke konten utama.

Kenapa Penting?

Pengguna dengan keterbatasan motorik, pemakai pembaca layar, hingga power user yang mengetik cepat semuanya bergantung pada keyboard. Website yang hanya bisa dipakai dengan mouse memutus akses kelompok ini sekaligus melanggar kriteria WCAG. Memastikan navigasi keyboard juga membantu kualitas antarmuka secara keseluruhan, karena memaksa struktur halaman tetap rapi dan logis. Pedoman lengkapnya tersedia di WAI-ARIA Authoring Practices.

Pertanyaan Umum

Bagaimana cara menguji navigasi keyboard?

Letakkan mouse, lalu telusuri seluruh halaman hanya dengan Tab, Shift+Tab, Enter, dan Esc. Jika ada elemen yang tidak bisa dicapai atau fokusnya hilang, di situ masalahnya.

Apakah menghapus outline fokus boleh?

Boleh hanya jika Anda menggantinya dengan indikator fokus lain yang jelas. Menghilangkannya tanpa pengganti membuat pengguna keyboard kehilangan jejak posisi.