Status Fokus yang Dapat Diakses: Merancang Fokus Keyboard yang Terlihat
Cara mendesain fokus keyboard terlihat yang memenuhi WCAG 2.2: apa yang dibutuhkan 2.4.7 dan 2.4.13, cara kerja :fokus-terlihat, dan tip desain untuk cincin fokus.
Pengambilan Inti
Setiap elemen interaktif memerlukan indikator fokus yang terlihat jelas bagi pengguna keyboard; WCAG 2.2 memerlukannya pada level AA (2.4.7). Untuk indikator yang kuat, bidik panduan AAA WCAG (2.4.13): setidaknya area garis piksel 2 CSS di sekitar elemen dengan kontras 3:1 antara keadaan fokus dan tidak fokus. Gunakan :focus-visible untuk menampilkan dering bagi pengguna keyboard tanpa menampilkannya pada setiap klik mouse.
Mengapa negara fokus itu penting
Orang yang menggunakan keyboard, perangkat pengalih, atau kaca pembesar layar menelusuri halaman satu elemen dalam satu waktu. Indikator fokus adalah satu-satunya cara mereka mengetahui di mana mereka berada. Menghapus kerangka browser tanpa penggantinya adalah salah satu kegagalan aksesibilitas yang paling umum.
Apa yang dibutuhkan WCAG 2.2
Kriteria keberhasilan 2.4.7 Fokus Terlihat (level AA) mengharuskan setiap antarmuka yang dapat dioperasikan dengan keyboard memiliki mode di mana indikator fokus terlihat. WCAG 2.2 menambahkan 2.4.13 Focus Appearance (level AAA), yang menggambarkan indikator kuat: setidaknya sebesar area perimeter komponen setebal 2 CSS piksel, dengan rasio kontras minimal 3:1 antara keadaan fokus dan tidak fokus.
:fokus-terlihat
MDN menjelaskan bahwa :focus-visible berlaku ketika suatu elemen memiliki fokus dan browser memutuskan, menggunakan heuristik, fokus tersebut harus ditampilkan, biasanya untuk penggunaan keyboard. Itu memungkinkan Anda menampilkan cincin fokus yang kuat untuk pengguna keyboard tanpa menampilkannya setiap kali seseorang mengklik tombol dengan mouse. Gunakan itu alih-alih menghapus garis luar.
Merancang cincin
Panduan praktis:
- Gunakan outline atau cincin dengan offset agar tidak menyatu dengan elemen.
- Periksa kontras terhadap setiap latar belakang tempat elemen tersebut muncul; cincin dua warna membantu.
- Jaga agar tetap konsisten di seluruh komponen, yang didefinisikan sebagai token dalam sistem desain Anda.
- Jangan pernah mengandalkan perubahan warna yang halus saja.
- Pastikan elemen fokus tidak tersembunyi di balik header tempel.
Fokus dan gerak
Cincin fokus dapat muncul dengan transisi yang sangat singkat, namun akan terasa instan. Hindari animasi yang menunda dering atau memindahkan elemen, dan untuk komponen gambar kanvas khusus, pastikan masih ada elemen yang benar-benar dapat difokuskan di halaman sehingga pengguna keyboard dapat menjangkaunya.
Kunci Principles untuk Diingat
- Fokus yang terlihat diperlukan di WCAG AA (2.4.7)
- 2.4.13 (AAA): area keliling 2 piksel dan perubahan kontras 3:1
- Gunakan :fokus-terlihat alih-alih menghapus garis tepi
- Tentukan cincin fokus sebagai token desain
- UI yang dirender dengan kanvas memerlukan elemen nyata yang dapat difokuskan
Pertanyaan yang Sering Diajukan
Sumber
- Understanding SC 2.4.7: Focus Visible — W3C WAI
- Understanding SC 2.4.13: Focus Appearance — W3C WAI
- :focus-visible — Dokumen Web MDN