Indikator fokus, yang sering ditandai dengan "cincin fokus", mengidentifikasi elemen yang menjadi fokus di halaman Anda. Untuk pengguna yang tidak dapat atau tidak ingin menggunakan mouse, indikator ini sangat penting, karena berfungsi sebagai pengganti pointer mouse.
Jika indikator fokus default browser bertentangan dengan desain Anda, Anda dapat menggunakan CSS untuk menata ulang indikator tersebut. Ingatlah untuk selalu memikirkan pengguna Anda.
Gunakan :focus untuk selalu menampilkan indikator fokus
Pseudo-class :focus
diterapkan ke elemen yang menjadi fokus, terlepas dari metode input
atau perangkat (seperti mouse, keyboard, atau stilus) yang digunakan.
Misalnya, <div> berikut memiliki tabindex yang membuatnya dapat difokuskan,
dengan gaya kustom untuk status :focus-nya:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Apa pun perangkat yang Anda gunakan, <div> akan terlihat sama saat difokuskan.
Sayangnya, browser dapat tidak konsisten dalam menerapkan fokus. Apakah atau tidak elemen menerima fokus dapat bergantung pada browser dan sistem operasi.
Misalnya, <button> berikut memiliki CSS kustom untuk status :focus-nya.
button:focus {
outline: 4px dashed orange;
}
Jika Anda mengklik <button> dengan mouse di Chrome di macOS, Anda akan melihat gaya fokus kustomnya. Namun, Anda tidak akan melihat gaya fokus kustom jika Anda
mengklik <button> di Safari di macOS. Hal ini karena di
Safari, elemen tidak menerima fokus saat Anda mengkliknya.
Perilaku fokus tidak konsisten. Uji halaman Anda di berbagai perangkat dan dengan berbagai input untuk memastikan gaya fokus Anda dapat diterima oleh pengguna.
Gunakan :focus-visible untuk menampilkan indikator fokus secara selektif
Pseudo-class :focus-visible
diterapkan saat elemen menerima fokus dan browser
menentukan (dengan heuristik) bahwa menampilkan indikator fokus akan
bermanfaat bagi pengguna. Khususnya, jika interaksi pengguna terbaru adalah dengan keyboard dan penekanan tombol tidak menyertakan tombol meta, ALT, OPTION, atau CONTROL, maka :focus-visible akan cocok.
Tombol dalam contoh berikut secara selektif menampilkan indikator fokus. Jika Anda menggunakan mouse untuk mengklik, hasilnya akan berbeda dengan jika Anda menggunakan keyboard terlebih dahulu untuk membuka tab.
button:focus-visible {
outline: 4px dashed orange;
}
Menggunakan :focus-within untuk menata gaya induk elemen yang difokuskan
Pseudo-class
:focus-within
diterapkan ke elemen saat elemen itu sendiri menerima
fokus atau saat elemen turunan menerima fokus. Langkah ini dapat digunakan untuk menandai
area halaman guna menarik perhatian pengguna ke area tersebut.
Misalnya, formulir menerima fokus saat formulir itu sendiri dipilih dan juga saat salah satu tombol radionya dipilih.
form:focus-within {
background: #ffecb3;
}
Waktu menampilkan indikator fokus
Pertanyaan yang baik untuk ditanyakan pada diri sendiri adalah, "Jika Anda mengklik kontrol ini saat menggunakan perangkat seluler, apakah Anda mengharapkan kontrol ini menampilkan keyboard?"
- Jika ya: Kontrol harus selalu menampilkan indikator fokus, terlepas dari
perangkat input. Misalnya, hal ini hampir selalu benar untuk elemen
<input type="text">. Pengguna perlu mengirim input ke elemen dengan keyboard, terlepas dari bagaimana elemen input menjadi fokus. - Jika tidak: Kontrol dapat memilih untuk menampilkan indikator fokus secara selektif. Misalnya, saat pengguna mengklik
<button>dengan mouse atau di layar sentuh, tindakan selesai. Indikator fokus mungkin tidak diperlukan. Namun, jika pengguna menjelajahi dengan keyboard, sebaiknya tampilkan indikator fokus agar pengguna dapat memutuskan apakah mereka ingin mengaktifkan kontrol dengan ENTER atau SPACE.
Menghindarinoutline: none
Cara browser memutuskan kapan harus menggambar indikator fokus, terus terang, sangat membingungkan. Mengubah tampilan elemen <button> dengan CSS atau memberikan
tabindex pada elemen menyebabkan perilaku ring fokus default browser
diaktifkan.
Terkadang, developer menghapus indikator fokus menggunakan CSS:
/* Don't do this!!! */
:focus {
outline: none;
}
Cara yang lebih baik untuk mengatasi masalah ini adalah dengan menggabungkan :focus dan polyfill :focus-visible. Blok kode pertama menunjukkan cara kerja polyfill, dan aplikasi contoh di bawahnya memberikan contoh penggunaan polyfill untuk mengubah indikator fokus pada tombol.
/*
This hides the focus indicator if the element receives focus with a
mouse, but it still shows up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
/*
Optionally: Define a strong focus indicator for keyboard focus.
If you choose to skip this step, then the browser's default focus
indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
...
}