Intinya...
Ada indikator yang menunjukkan elemen apa yang menerima fokus ketika pengguna menavigasi menggunakan keyboard.
Apa itu WCAG 2.4.7?
Gunakan indikator fokus untuk menunjukkan kepada pengguna yang menavigasi dengan keyboard di mana fokus saat ini berada. Misalnya, tombol, tautan, atau kolom formulir mungkin memiliki garis tepi, perubahan warna, atau garis bawah saat dipilih. Ini membantu pengguna keyboard untuk melihat dengan jelas elemen yang akan mereka interaksikan.
Mengapa ini penting?
Tanpa indikator fokus, pengguna yang menavigasi dengan keyboard mungkin kesulitan untuk memahami di mana mereka berada di halaman. Ini sangat frustasi bagi pengguna dengan gangguan fisik, keterbatasan kognitif, atau kondisi sementara seperti mouse yang rusak. Indikator fokus menyelesaikan masalah ini dengan memberikan tanda visual yang jelas.
Bayangkan mencoba mengisi formulir tanpa mengetahui kolom mana yang sedang kamu ketik atau menavigasi menu tanpa mengetahui item mana yang aktif. Indikator fokus menyelesaikan masalah ini dengan menunjukkan dengan jelas di mana posisi pengguna.
Siapa yang terpengaruh?
Pengguna dengan gangguan mobilitas, pengguna dengan gangguan membaca dan belajar, dan pengguna low vision.
Pengguna dengan gangguan mobilitas yang mengandalkan navigasi keyboard menggunakan petunjuk visual untuk membantu mengurangi kesalahan saat berinteraksi dengan elemen dan membuat navigasi menjadi lebih mudah, mengurangi ketegangan fisik.
Pengguna dengan gangguan membaca dan belajar menggunakan petunjuk visual elemen fokus untuk membantu mereka tetap fokus saat berinteraksi di halaman.
Pengguna low vision yang mengandalkan layar pembesar sering kali melihat halaman dengan konten yang berkurang. Memastikan elemen yang terfokus tetap terlihat mencegah elemen tersebut tersembunyi atau terpotong.
Cara menerapkan WCAG 2.4.7
Tunjukkan indikator visual saat elemen diberikan fokus
Navigasikan halaman web dengan keyboard dan pastikan semua komponen interaktif mengaktifkan petunjuk atau indikator visual saat mereka menerima fokus. Ini termasuk tombol, tautan, kolom formulir, komponen kustom, dll.
Jangan bergantung pada pengaturan default browser atau sistem operasi
Sebagian besar browser dan sistem operasi memiliki opsi untuk secara otomatis menyorot kontrol standar seperti kolom teks dan tautan saat mereka menerima fokus. Namun, pengaturan ini mungkin tidak sekomprehensif itu dan tidak selalu konsisten di seluruh browser atau perangkat. Sebaiknya gunakan salah satu teknik yang tercantum di bawah ini.
Atur indikator fokus dengan CSS
Gunakan pseudoclass CSS :focus-visible
dan :focus
untuk menerapkan gaya kustom pada elemen ketika mereka menerima fokus melalui keyboard. Berbeda dengan pseudoclass :focus
, :focus-visible
secara khusus menargetkan navigasi keyboard, menghindari indikator fokus yang tidak perlu bagi pengguna mouse.
Pada contoh ini, kamu bisa menggunakan :focus-visible
untuk menerapkan garis biru di sekitar tautan ketika mereka menerima fokus dari keyboard.
a:focus-visible {
outline: 2px solid blue;
}
Indikator fokus juga berguna bagi pengguna mouse. Misalnya, saat mengisi formulir, akan sangat membantu untuk jelas melihat kolom mana yang telah Anda klik dan sedang Anda kerjakan. Pada contoh berikut, kolom input teks disorot dengan garis merah dan latar belakang merah muda saat menerima fokus.
input[type="text"]:focus {
outline: 2px solid red;
background-color: pink;
}
Kesimpulan
Fokus yang terlihat membuat navigasi dengan keyboard menjadi jauh lebih mudah dan mengurangi kemungkinan kesalahan. Indikator fokus yang jelas dan terlihat memberi tahu pengguna persis di mana mereka berada dan membantu mereka tetap fokus.