Banyak orang menggunakan keyboard—atau software atau hardware yang meniru fungsi keyboard, seperti perangkat sakelar—sebagai sarana navigasi utama. Hal ini mungkin disebabkan oleh preferensi pribadi, efisiensi, atau hardware yang rusak.
Orang dengan keterbatasan fisik sementara, seperti pergelangan kaki terkilir atau gangguan motorik halus seperti carpal tunnel, dapat memilih menggunakan keyboard untuk navigasi. Pengguna tunanetra atau yang memiliki gangguan penglihatan dapat menggunakan keyboard untuk navigasi yang dikombinasikan dengan software pembesar atau pembaca layar. Namun, mereka mungkin menggunakan perintah pintasan keyboard yang berbeda untuk menavigasi layar daripada pengguna yang dapat melihat.
Beberapa orang tanpa disabilitas juga dapat memilih untuk menavigasi menggunakan keyboard.
Dukungan keyboard untuk semua disabilitas dan situasi ini sangat penting. Sebagian besar aksesibilitas keyboard berpusat pada fokus. Fokus mengacu pada elemen di layar yang secara aktif menerima input dari keyboard.
Dalam modul ini, kita akan berfokus pada struktur HTML dan gaya CSS untuk elemen keyboard dan yang dapat difokuskan. Modul JavaScript menyertakan informasi selengkapnya tentang pengelolaan fokus dan penekanan tombol untuk elemen interaktif.
Urutan fokus
Elemen yang dapat dinavigasi oleh pengguna keyboard disebut elemen yang dapat difokuskan. Urutan fokus, yang juga disebut urutan tab atau navigasi, adalah urutan elemen menerima fokus. Urutan fokus default harus logis, intuitif, dan cocok dengan urutan visual halaman.
Untuk sebagian besar bahasa, urutan fokus dimulai di bagian atas halaman dan berakhir di bagian bawah, bergerak dari kiri ke kanan. Namun, beberapa bahasa dibaca dari kanan ke kiri, sehingga bahasa utama halaman mungkin memerlukan urutan fokus yang berbeda.
Secara default, urutan fokus mencakup elemen HTML yang secara alami dapat difokuskan, seperti link, kotak centang, dan input teks. Elemen HTML yang secara alami dapat difokuskan mencakup dukungan urutan tab bawaan dan penanganan peristiwa keyboard dasar.
Anda dapat memperbarui urutan fokus untuk menyertakan elemen apa pun yang biasanya tidak menerima fokus, seperti elemen HTML non-interaktif, komponen kustom, atau elemen dengan ARIA, dan mengganti semantik fokus alami.
Tabindex
Urutan fokus dimulai dengan elemen yang memiliki atribut tabindex positif (jika ada) dan bergerak dari angka positif terkecil ke terbesar (seperti 1, 2, 3). Kemudian, urutan fokus akan dilanjutkan melalui elemen dengan tabindex nol sesuai dengan urutannya dalam DOM. Setiap elemen dengan tabindex negatif akan dihapus dari urutan fokus alami.
Jika tabindex
nol (tabindex="0") diterapkan ke elemen yang biasanya tidak dapat difokuskan, elemen tersebut akan
ditambahkan ke urutan fokus alami halaman sesuai dengan cara elemen tersebut muncul
di DOM. Namun, tidak seperti elemen HTML yang secara alami dapat difokuskan, Anda harus
memberikan dukungan keyboard tambahan
agar elemen tersebut dapat diakses sepenuhnya.
Demikian pula, jika Anda memiliki elemen yang biasanya dapat difokuskan tetapi tidak
aktif—seperti tombol yang tidak beroperasi hingga kolom input diisi
in—Anda harus menambahkan tabindex negatif (tabindex="-1") ke elemen ini. Menambahkan tabindex negatif memberi sinyal kepada teknologi pendukung dan keyboard bahwa tombol ini harus dihapus dari urutan fokus alami. Namun, jangan khawatir—Anda dapat menggunakan JavaScript untuk menambahkan fokus kembali ke elemen jika diperlukan.
Dalam contoh ini, atribut tabindex ditambahkan ke elemen yang tidak secara alami menerima fokus. Urutan elemen dimanipulasi menggunakan tabindex untuk mengilustrasikan pengaruhnya terhadap urutan fokus. Ini adalah contoh hal yang tidak boleh dilakukan.
Lewati link
Sebagian besar situs saat ini memiliki daftar panjang link menu di header utama halaman yang konsisten dari halaman ke halaman. Hal ini bagus untuk navigasi umum, tetapi dapat menyulitkan pengguna yang hanya menggunakan keyboard untuk mengakses konten utama situs dengan mudah tanpa harus menekan tab beberapa kali.
Salah satu cara untuk melompati grup link yang berlebihan atau tidak berguna adalah dengan menambahkan link lewati. Link lewati adalah link anchor yang melompat ke bagian lain dari halaman yang sama, menggunakan ID bagian tersebut, bukan mengirim pengguna ke halaman lain di situs atau resource eksternal. Link lewati biasanya ditambahkan sebagai elemen pertama yang dapat difokuskan yang akan ditemui pengguna saat membuka situs dan dapat terlihat atau disembunyikan secara visual hingga pengguna menekan tab ke link tersebut, bergantung pada desain yang diperlukan.
Saat pengguna menekan tombol tab, dan link lewati aktif ada, fokus keyboard akan dikirim ke link lewati. Pengguna dapat mengklik link lewati dan melompati bagian header dan navigasi utama. Jika pengguna memilih untuk tidak mengklik link lewati dan terus menekan tab ke bawah DOM, pengguna akan dikirim ke elemen berikutnya yang dapat difokuskan.
Seperti semua link, penting agar link lewati menyertakan konteks tentang tujuan link. Menambahkan frasa "Lewati ke konten utama" akan memberi tahu pengguna ke mana link tersebut akan mengarahkan mereka. Ada banyak opsi kode yang dapat dipilih saat
memberikan konteks tambahan ke link Anda, seperti
aria-labelledby,
aria-label, atau menambahkannya
ke konten teks elemen <a>, seperti yang ditunjukkan dalam contoh.
Indikator fokus
Seperti yang baru saja Anda pelajari, urutan fokus adalah aspek penting dari aksesibilitas keyboard. Penting juga untuk memutuskan gaya fokus tersebut. Karena meskipun urutan fokusnya sangat baik, bagaimana pengguna dapat mengetahui posisi mereka di halaman tanpa gaya yang tepat?
Indikator fokus yang terlihat sangat penting untuk memberi tahu pengguna tentang posisi mereka di halaman setiap saat. Hal ini sangat penting bagi pengguna yang hanya menggunakan keyboard dan dapat melihat. Fokus Tidak Terhalang (Minimum) memastikan bahwa indikator fokus tidak tersembunyi di bawah komponen lain.
Gaya default browser
Saat ini, setiap browser web modern memiliki gaya visual default yang berbeda yang berlaku untuk elemen yang dapat difokuskan di situs atau aplikasi Anda, beberapa di antaranya lebih terlihat daripada yang lain. Saat pengguna menekan tab melalui halaman, gaya ini akan diterapkan saat elemen menerima fokus keyboard.
Jika Anda mengizinkan browser menangani gaya fokus, penting untuk meninjau kode Anda guna mengonfirmasi bahwa tema Anda tidak akan mengganti gaya default browser. Penggantian gaya sering ditulis sebagai "outline: 0" atau "outline: none" dalam
stylesheet Anda. Kode kecil ini dapat menghapus gaya indikator fokus default browser, yang akan sangat menyulitkan pengguna untuk menavigasi situs atau aplikasi Anda.
Tidak direkomendasikan — tanpa garis luar
a:focus { outline: none; /* don't do this! */ }
Direkomendasikan — garis luar bergaya
a:focus { outline: auto 5px Highlight; /* for non-webkit browsers */ outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */ }
Gaya kustom
Tentu saja, Anda dapat menggunakan gaya browser default dan membuat indikator fokus kustom yang melengkapi tema Anda. Saat membuat indikator fokus kustom, Anda memiliki banyak kebebasan untuk berkreasi.
Bentuk indikator fokus dapat memiliki banyak bentuk, baik garis luar, batas, garis bawah, kotak, perubahan latar belakang, atau perubahan gaya lain yang jelas dan tidak hanya mengandalkan warna untuk menunjukkan bahwa fokus keyboard aktif pada elemen tersebut.
Anda dapat mengubah gaya indikator fokus untuk memastikan indikator tersebut dapat dilihat. Misalnya, jika halaman memiliki latar belakang putih, Anda dapat menetapkan indikator fokus tombol ke latar belakang biru. Jika halaman memiliki latar belakang biru, Anda dapat menetapkan gaya fokus tombol yang sama ke latar belakang putih.
Anda dapat mengubah gaya elemen fokus berdasarkan jenis elemen. Misalnya, Anda dapat menggunakan garis bawah putus-putus untuk link isi, tetapi memilih batas bulat untuk elemen tombol.
Tidak ada aturan tentang jumlah gaya indikator fokus yang Anda miliki di satu halaman—tetapi pastikan jumlahnya wajar untuk menghindari kebingungan yang tidak perlu.