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.

Beberapa cara penerapan CSS untuk indikator fokus aktif

Tiga contoh elemen dengan indikator fokus aktif. Yang pertama menunjukkan warna latar belakang kolom Name berubah menjadi biru ketika fokus diterima. Yang kedua menunjukkan tombol dengan kotak garis tepi gelap di sekitarnya. Terakhir, tautan digarisbawahi saat fokus diterapkan.

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

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

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.