Visible Focus

Pengguna keyboard menelusuri halaman dengan tombol Tab, dan satu-satunya petunjuk bagi mereka tentang posisi saat ini adalah indikator fokus yang berpindah antarelemen. Ironisnya, indikator inilah yang paling sering dihapus dari stylesheet — biasanya lewat outline: none demi tampilan yang “bersih” — tanpa pengganti apa pun. Untuk pengguna keyboard, halaman tanpa indikator fokus serupa peta tanpa penunjuk posisi. Chapter ini membahas cara merancang indikator yang terlihat jelas, berkontras, dan tetap serasi dengan desain; perilaku :focus versus :focus-visible sendiri telah dibahas tuntas pada Chapter Focus dan Focus-visible .

Outline Tidak Dihapus, Melainkan Digayai #

Outline adalah bahan baku indikator fokus karena digambar di luar kotak tanpa menggeser elemen di sekitarnya — berbeda dengan border yang mengubah layout. Browser menyediakan outline bawaan pada elemen yang menerima fokus; gayai ulang bila perlu, jangan hilangkan:

.tombol:focus-visible {
  outline: 3px solid rgb(37, 99, 235);
  outline-offset: 2px;
}

1. outline: 3px solid rgb(37, 99, 235): cincin biru setebal 3px — cukup tebal untuk dikenali sekilas.
2. outline-offset: 2px: celah 2px antara tepi tombol dan cincin, sehingga keduanya tidak menyatu ketika tombol punya latar penuh warna.
3. Selector :focus-visible: cincin hanya tampil ketika browser menilai pengguna memang membutuhkannya — umumnya fokus dari keyboard.

Hasil di Browser:

Tombol dalam keadaan diam tampil tanpa cincin (outline-style "none",
outline-width "0px"). Kotak pembanding menampilkan cincin statis dengan
nilai yang sama persis dengan aturan :focus-visible: outline-style
"solid", outline-width "3px", outline-color "rgb(37, 99, 235)",
outline-offset "2px". Tautan varian memakai cincin teal 2px
"rgb(13, 148, 136)", dan kotak gelap memakai cincin putih
"rgb(255, 255, 255)" di atas latar "rgb(2, 6, 23)".

Probe otomatis tidak dapat menekan Tab, sehingga demo menyediakan kotak pembanding yang cincinnya selalu aktif — nilai computed-nya identik dengan aturan :focus-visible pada tombol.

Cincin yang Berkontras #

Indikator fokus termasuk elemen non-teks, sehingga ambang kontrasnya 3:1 terhadap latar sekitarnya (kriteria Non-text Contrast ). Tiga contoh pada demo memenuhinya dengan cara berbeda:

Cincin yang berwarna sama dengan latar — misalnya cincin biru pada tombol biru — tidak menolong siapa pun; pada kasus itu naikkan outline-offset atau ganti warna cincin. Bila desain menuntut warna tertentu yang kontrasnya pas-pasan, tebalkan outline dan tambahkan offset: kontras cincin diukur terhadap latar di sekelilingnya, bukan terhadap isi tombol.

Alternatif: box-shadow dan background #

Beberapa desain menghendaki cincin dengan sudut yang mengikuti border-radius secara halus atau dengan warna ganda. Dua alternatif yang lazim:

1. box-shadow tanpa blur sebagai cincin: box-shadow: 0 0 0 3px rgb(37 99 235) — mengikuti radius sudut, digambar di luar kotak, dan dapat digandakan menjadi dua lapis dengan warna berbeda.
2. Latar yang berubah pada elemen seperti item daftar: mengubah background-color dari transparan menjadi warna lembut juga merupakan indikator yang sah, asalkan berkontras.

Keduanya sah selama kontras memenuhi ambang. Yang perlu dijaga: pilih satu pendekatan per komponen agar :focus-visible pada Forms dan tombol tampil konsisten — pengguna keyboard berharap pola yang sama berulang di seluruh halaman. Demo chapter ini (cincin-fokus.html) membawa tombol asli, tiga kotak pembanding cincin, dan tujuh pemeriksaan data-expected pada outline-style, outline-width, outline-color, outline-offset, dan background-color.