Intinya...

Semua fungsionalitas harus bisa dioperasikan menggunakan keyboard, kecuali yang membutuhkan input bebas (seperti menggambar).

Apa itu WCAG 2.1.1?

Sebagian besar fungsi di halaman web harus dapat digunakan hanya dengan keyboard. Jika suatu aksi dapat dilakukan dengan mouse, sentuhan, atau gerakan, pengguna juga harus dapat melakukannya dengan keyboard—kecuali dalam kasus tertentu.

Kriteria ini memastikan bahwa pengguna yang bergantung pada keyboard atau perangkat input mirip keyboard dapat mengakses dan mengoperasikan semua fungsi penting di situs web. Pengecualian diperbolehkan pada situasi di mana pengoperasian penuh dengan keyboard tidak praktis, seperti pada program menggambar atau permainan yang memerlukan input bebas tangan.

Ini berarti pengguna harus dapat:

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

Dan mereka tidak perlu mengandalkan kombinasi tombol yang rumit atau waktu yang tepat untuk melakukannya.

Ilustrasi pengguna menekan spacebar

Sebuah tangan menekan tombol spasi untuk mengaktifkan tombol 'Click Here!' di layar, menunjukkan interaksi keyboard tanpa menggunakan mouse.

Mengapa ini penting?

Beberapa pengguna mungkin tidak dapat menggunakan mouse. Pengguna-pengguna ini mungkin menggunakan keyboard biasa, atau mereka mungkin menggunakan teknologi bantu lainnya, seperti software input suara, software sip-and-puff, dan on-screen keyboard, untuk meniru fungsi keyboard.

Dengan hal itu, penting untuk memastikan bahwa semua fungsionalitas di halaman web dapat diakses hanya melalui keyboard sehingga semua orang dapat berinteraksi dan mengoperasikan halaman web serta semua kontennya. Jika tidak, beberapa orang mungkin tidak dapat membaca seluruh konten, mengisi formulir, memutar video, atau menyelesaikan tugas dasar lainnya di halaman tersebut.

Siapa yang terpengaruh?

Pengguna low vision atau penglihatan terbatas, dan pengguna dengan keterbatasan motorik.

Pengguna dengan gangguan penglihatan, seperti low vision atau terbatas, membutuhkan penggunaan keyboard untuk menavigasi dan mengoperasikan halaman web. Ketika situs web tidak kompatibel dengan keyboard, situs tersebut menjadi tidak dapat digunakan karena pengguna tidak dapat menavigasi konten atau berinteraksi dengannya.

Pengguna dengan disabilitas mobilitas mungkin merasa sulit atau tidak mungkin menggunakan mouse dan mungkin lebih memilih untuk menggunakan keyboard atau keyboard alternatif.

Cara menerapkan WCAG 2.1.1?

Pastikan semua fungsionalitas dapat diakses dengan keyboard

Mulailah dengan menguji setiap bagian situs webmu hanya menggunakan keyboard:

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

Catatan: 2.1.1 memperbolehkan pengecualian untuk jenis fungsionalitas tertentu di mana dukungan keyboard penuh tidak praktis—, seperti menggambar bebas tangan atau memanipulasi objek dalam permainan. Namun, sebagian besar situs web tidak bergantung pada jenis interaksi tersebut, jadi usahakan untuk mendukung keyboard sepenuhnya di mana pun memungkinkan.

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

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

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

...semuanya sudah ramah keyboard secara default. Mereka mendukung fokus, interaksi, dan dukungan screen reader secara otomatis—tanpa memerlukan pengkodean tambahan.

Ilustrasi pengguna menggunakan tab

Ilustrasi konten web di mana panah menunjukkan judul, tautan, dan tombol untuk mendemonstrasikan urutan tab elemen saat tangan menekan tombol tab pada keyboard.

Gunakan script 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 kasus 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 seharusnya menjadi fallback, bukan pilihan pertama kamu.

Jika kamu membuat komponen kustom, kamu perlu:

  • Mengelola fokus keyboard dengan JavaScript
  • Mendukung key events (seperti tombol panah, Enter, atau Space)
  • Menggunakan peran dan properti ARIA untuk menjelaskan perilaku ke teknologi bantu

Setiap kali memungkinkan, mulai dengan kontrol HTML asli. Mereka jauh lebih mudah untuk dibuat dapat diakses dan bekerja lebih andal untuk lebih banyak pengguna.

Kesimpulan

Sebagian besar fungsionalitas harus dapat berfungsi dengan keyboard.

Itulah garis bawah untuk WCAG 2.1.1. Pengguna tidak boleh dipaksa untuk menggunakan mouse. Jika ada bagian dari situs web kamu yang tidak dapat digunakan dengan keyboard, kamu perlu menyediakan alternatif yang dapat diakses dengan keyboard kecuali interaksi tersebut benar-benar merupakan pengecualian, seperti menggambar atau input bebas bentuk.

Mendukung akses penuh keyboard tidak hanya membantu pengguna screen reader. Ini juga bermanfaat bagi siapa saja yang menggunakan metode input alternatif, memiliki mobilitas terbatas, atau lebih memilih keyboard. Ini adalah bagian penting dari menjadikan web dapat digunakan untuk semua orang. Ini adalah salah satu fondasi aksesibilitas—dan tempat yang bagus untuk memulai.