Intinya...

Semua fungsionalitas harus bisa dioperasikan menggunakan keyboard (tanpa pengecualian, bahkan untuk kebutuhan yang melibatkan gerakan tangan seperti drag-and-drop).

Apa itu WCAG 2.1.3?

Semua yang ada di halaman web harus sepenuhnya dapat digunakan hanya dengan keyboard. Jika seseorang bisa melakukannya dengan mouse, sentuhan, atau gerakan, mereka juga harus dapat melakukannya menggunakan keyboard, tanpa pengecualian.

Ini merupakan pengembangan dari WCAG 2.1.1 Keyboard, yang memperbolehkan beberapa pengecualian untuk interaksi kompleks (seperti menggambar dengan tangan bebas). Namun, 2.1.3 (Level AAA) menghapus pengecualian tersebut—segala hal harus berfungsi menggunakan input keyboard.

Artinya, pengguna harus dapat:

  • Menavigasi ke semua konten
  • Mengaktifkan semua tombol dan link
  • Mengisi dan mengirimkan formulir
  • Menggunakan kontrol seperti slider atau dropdown
  • Memutar video atau media interaktif

Dan mereka tidak boleh bergantung pada kombinasi tombol kompleks atau waktu yang tepat untuk melakukannya.

Ilustrasi pengguna menggunakan spacebar

Sebuah tangan menekan tombol spasi untuk mengaktifkan tombol 'Click Here!' di layar, menunjukkan bahwa semua fungsi bekerja tanpa menggunakan mouse.

Mengapa ini penting?

Tidak semua orang dapat menggunakan mouse. Beberapa pengguna bergantung pada:

  • Keyboard biasa
  • Keyboard layar
  • Perangkat input suara
  • Perangkat sip-and-puff
  • Switch control atau teknologi bantu lainnya

Semua alat ini meniru input keyboard. Jadi jika situs web kamu hanya berfungsi dengan mouse atau sentuhan, banyak orang yang tidak akan bisa menggunakannya sama sekali. Mereka bisa terhalang untuk membaca konten, mengisi formulir, menekan tombol, atau menyelesaikan tugas penting.

Siapa yang terpengaruh?

Pengguna low vision atau memiliki penglihatan terbatas, pengguna dengan mobilitas terbatas, dan pengguna dengan gangguan motorik halus.

Pengguna low vision mungkin tidak dapat melihat atau menggunakan penunjuk mouse dan sebaliknya menavigasi dengan keyboard. Pengguna dengan kontrol motorik terbatas atau tremor mungkin merasa kesulitan atau tidak mungkin menggunakan mouse.

Berbeda dengan 2.1.1, kriteria ini tidak memperbolehkan pengecualian, bahkan untuk menggambar, gerakan, atau interaksi kompleks lainnya. Semua hal harus dapat dioperasikan dengan keyboard.

Beberapa pengguna mungkin bergantung pada keyboard kustom atau perangkat lain yang meniru penekanan tombol. Jika situs web kamu tidak sepenuhnya mendukung navigasi keyboard, pengguna ini mungkin terkunci sepenuhnya.

Cara menerapkan WCAG 2.1.3

Bagian ini menawarkan penjelasan yang disederhanakan dan contoh-contoh untuk membantu kamu memulai. Untuk panduan lengkap, selalu rujuk ke dokumentasi resmi WCAG.

Buat segalanya dapat diakses dengan keyboard

Mulailah dengan menguji setiap bagian situs web kamu hanya dengan keyboard:

  • Gunakan tombol Tab untuk bergerak maju melalui elemen interaktif
  • Gunakan Shift + Tab untuk bergerak mundur
  • Gunakan Enter atau Space untuk mengaktifkan link dan tombol
  • Gunakan tombol arah untuk menavigasi menu, slider, atau tab

Jika kamu tidak dapat mencapai atau mengoperasikan sesuatu dengan keyboard, itu perlu diperbaiki.

Cara yang paling mudah dan andal untuk memastikan aksesibilitas keyboard adalah dengan menggunakan elemen HTML semantik kapan pun memungkinkan. Elemen bawaan seperti:

  • <a href="...">
  • <button>
  • <input>, <select>, <textarea>

Semua elemen ini sudah ramah keyboard secara default. Mereka mendukung fokus, interaksi, dan dukungan screen reader secara otomatis—tanpa perlu pengkodean tambahan.

Ilustrasi pengguna menggunakan tab

Konten web di mana panah menunjukkan heading, link, dan tombol untuk mendemonstrasikan urutan tab elemen saat tangan menekan tombol tab pada keyboard.

Gunakan scripting dan ARIA untuk komponen kustom

Jika kamu membuat komponen interaktif kustom dan tidak ada opsi untuk menggunakan elemen HTML semantik, kamu perlu menambahkan dukungan keyboard secara manual. Dalam hal ini, tabindex="0" memungkinkan elemen yang biasanya tidak dapat difokuskan,seperti <div> atau <span>,untuk menerima fokus keyboard.

<div tabindex="0">Custom widget that accepts keyboard focus</div>

Namun, ini sebaiknya menjadi solusi cadangan, bukan pilihan utama.

Jika kamu membuat komponen kustom, kamu perlu untuk:

  • Mengelola fokus keyboard dengan JavaScript
  • Mendukung peristiwa tombol (seperti tombol arah, Enter, atau Space)
  • Menggunakan role ARIA dan properti untuk menggambarkan perilaku kepada teknologi bantu

Selama memungkinkan, mulailah dengan kontrol HTML asli, mereka jauh lebih mudah dibuat dapat diakses dan bekerja lebih handal untuk lebih banyak pengguna.

Kesimpulan

Segala hal harus bekerja dengan keyboard.

Itulah inti dari WCAG 2.1.3: Tanpa mouse, tanpa pengecualian. Jika bagian mana pun dari situs web kamu bergantung pada gerakan, klik, atau drag-and-drop, kamu perlu menyediakan interaksi keyboard yang setara.

Mendukung akses penuh keyboard tidak hanya membantu pengguna screen reader, tapi juga bermanfaat bagi siapa saja yang menggunakan metode input alternatif, memiliki mobilitas terbatas, atau hanya lebih suka menggunakan keyboard. Ini adalah bagian kunci untuk membuat web dapat digunakan oleh semua orang.