Fokus Terlihat: Jangan Sembunyikan Garis Fokus

Pengguna papan ketik hanya dapat melihat satu hal pada satu waktu: kontrol mana yang sedang memiliki fokus. Penanda yang terlihat itu disebut indikator fokus. 👀

Secara bawaan, peramban menggambar garis tepi fokus di sekitar elemen aktif saat Anda menekan Tab. Itulah penanda bawaan yang menunjukkan posisi Anda.

Desainer sering tidak menyukai garis tepi tersebut lalu menghapusnya. Satu aturan itu, outline none, langsung membuat pengguna papan ketik tidak dapat melihat fokus. Jangan pernah merilisnya begitu saja.

Anda boleh menghapus garis tepi bawaan, tetapi hanya jika menambahkan pengganti yang jelas. Jangan pernah membiarkan kontrol yang sedang fokus terlihat persis seperti kontrol yang tidak aktif.

Indikator yang baik mudah terlihat: garis tepi tebal, cincin, atau perubahan warna yang kuat. Samar adalah musuh di sini, bukan teman Anda.

Pemilih focus-visible menampilkan cincin bagi pengguna papan ketik, tetapi menyembunyikannya saat mengeklik dengan tetikus biasa. Anda mendapatkan keamanan tanpa gangguan visual.

Garis tepi yang menyatu dengan latar belakang tidak membantu siapa pun. Gaya fokus Anda memerlukan kontras yang cukup agar menonjol dari halaman.

Waspadai overflow hidden pada elemen induk. Properti itu dapat memotong garis tepi fokus sehingga tepi bawahnya menghilang tanpa terlihat.

Gunakan outline-offset untuk menjauhkan cincin dari elemen. Sedikit jarak membuat indikator jauh lebih mudah diperhatikan.

Ini bukan sekadar pemolesan. WCAG menuntut indikator fokus yang terlihat pada setiap elemen interaktif, sehingga menyembunyikannya dapat menyebabkan kegagalan kesesuaian.

Uji tercepat tidak memerlukan biaya: tekan Tab di seluruh halaman Anda. Jika Anda kehilangan jejak fokus, indikator Anda perlu diperbaiki.

Jangan pernah menghapus cincin fokus tanpa menggantinya. Utamakan focus-visible, berikan kontras dan offset yang kuat, lalu uji sendiri dengan Tab. ✅