Digital Transformation
:focus-visible
TL;DR: :focus-visible adalah pseudo-class CSS yang menampilkan indikator fokus hanya untuk pengguna keyboard atau assistive technology. Klik mouse tidak memunculkan outline, sementara pengguna Tab tetap melihat ring fokus yang jelas. Sejak 2022 dukungan sudah lengkap di semua browser modern.
Apa itu :focus-visible?
:focus-visible adalah pseudo-class CSS yang heuristik browsernya membedakan dua tipe interaksi. Pengguna yang menekan Tab atau memakai pembaca layar tetap mendapat outline fokus tebal, sementara klik mouse atau tap touch tidak memunculkan ring fokus pada elemen seperti tombol atau link.
Sebelum :focus-visible populer, banyak situs menghapus outline default pakai outline: none agar terlihat rapi, lalu mengorbankan kepatuhan WCAG untuk pengguna keyboard. Praktik ini melanggar Success Criterion 2.4.7 Focus Visible. :focus-visible menyelesaikan dilema dengan memberi kontrol per-konteks, mirip diferensiasi antara saklar lampu utama dan lampu meja kerja.
Cara Kerja dan Pola Penulisan
| Selector | Kapan aktif |
|---|---|
:focus | Setiap elemen fokus, termasuk klik mouse |
:focus-visible | Hanya keyboard, voice control, assistive tech |
:focus:not(:focus-visible) | Reset outline saat klik mouse |
Pola umum yang aman:
button { outline: none; }
button:focus-visible { outline: 2px solid #6366f1; outline-offset: 3px; }
Browser yang mendukung heuristik ini meliputi Chrome 86+, Firefox 85+, Safari 15.4+. Untuk fallback lama, sediakan :focus standar sebagai cadangan.
Kenapa Penting?
Tombol CTA atau form field yang kehilangan indikator fokus akan menghalangi pengguna disabilitas motorik dan visual. Hasil audit aksesibilitas yang dilakukan Vito Atmo pada beberapa landing klien menunjukkan 30 sampai 40 persen halaman e-commerce Indonesia masih menghilangkan outline secara global. Penerapan :focus-visible memulihkan kepatuhan WCAG tanpa harus menampilkan outline saat pelanggan klik tombol Beli pakai mouse. Detail teknis pendamping bisa dibaca di dokumentasi MDN tentang :focus-visible.
Pertanyaan Umum
Apakah :focus-visible menggantikan :focus?
Tidak. :focus tetap aktif di semua interaksi, sementara :focus-visible hanya tampil saat heuristik browser menganggap pengguna butuh indikator. Idealnya keduanya digunakan bersama untuk kompatibilitas legacy.
Apakah aman menulis outline: none secara global?
Aman selama dipasangkan dengan :focus-visible yang menyediakan indikator alternatif. Tanpa pasangan tersebut, situs gagal memenuhi WCAG 2.4.7.
Istilah Terkait