Indikator fokus (sering kali ditandai dengan "lingkaran fokus") mengidentifikasi elemen yang sedang difokuskan di halaman Anda. Bagi pengguna yang tidak dapat menggunakan mouse, indikator ini sangat penting karena berfungsi sebagai pengganti pointer mouse mereka.
Jika indikator fokus default browser bertentangan dengan desain, Anda dapat menggunakan CSS untuk menata ulang gayanya. Ingatlah untuk selalu mengingat pengguna {i>keyboard<i} Anda!
Gunakan :focus untuk selalu menampilkan indikator fokus
Class pseudo :focus
diterapkan setiap kali elemen difokuskan, terlepas dari perangkat
input (mouse, keyboard, stilus, dll.) atau metode yang digunakan untuk memfokuskannya. Misalnya,
<div> di bawah memiliki tabindex yang membuatnya dapat difokuskan. Class ini juga memiliki gaya kustom untuk status :focus-nya:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Terlepas dari apakah Anda menggunakan mouse untuk mengkliknya atau keyboard untuk menekan tab,
<div> akan selalu terlihat sama.
Sayangnya, browser dapat tidak konsisten dengan cara penerapan fokus. Apakah fokus diterima elemen atau tidak, mungkin bergantung pada browser dan sistem operasi.
Misalnya, <button> di bawah ini juga memiliki gaya 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
mengklik <button> di Safari pada macOS. Hal ini karena di Safari, elemen tersebut tidak menerima fokus saat Anda mengkliknya.
Karena perilaku fokus tidak konsisten, hal ini mungkin memerlukan sedikit pengujian di perangkat yang berbeda untuk memastikan gaya fokus Anda dapat diterima oleh pengguna.
Menggunakan :focus-visible untuk menampilkan indikator fokus secara selektif
Class pseudo
:focus-visible
baru diterapkan setiap kali elemen menerima fokus dan
browser menentukan melalui heuristik bahwa menampilkan indikator fokus akan
bermanfaat bagi pengguna. Secara khusus, jika interaksi pengguna terbaru
adalah melalui keyboard dan penekanan tombol tidak menyertakan meta, ALT / OPTION,
atau tombol CONTROL, :focus-visible akan cocok.
Tombol dalam contoh di bawah akan secara selektif menampilkan indikator fokus. Jika Anda mengkliknya, hasilnya akan berbeda dengan saat pertama kali menggunakan keyboard untuk menekan tombol tab.
button:focus-visible {
outline: 4px dashed orange;
}
Menggunakan :focus-within untuk menata gaya induk elemen yang difokuskan
Pseudo-class
:focus-within
diterapkan ke suatu elemen baik saat elemen itu sendiri menerima
fokus maupun saat elemen lain di dalam elemen tersebut menerima fokus.
Tombol ini dapat digunakan untuk menandai area halaman guna menarik perhatian pengguna ke area tersebut. Misalnya, formulir di bawah menerima fokus saat formulir tersebut dipilih maupun saat salah satu tombol pilihannya dipilih.
form:focus-within {
background: #ffecb3;
}
Kapan indikator fokus ditampilkan
Aturan praktis yang baik adalah bertanya pada diri sendiri, "Jika Anda mengklik kontrol ini saat menggunakan perangkat seluler, apakah Anda mengharapkannya menampilkan keyboard?"
Jika jawabannya adalah "ya", kontrol mungkin akan selalu menampilkan indikator
fokus, apa pun perangkat input yang digunakan untuk memfokuskannya. Contoh yang bagus adalah
elemen <input type="text">. Pengguna harus mengirimkan input ke
elemen melalui keyboard, terlepas dari cara elemen input awalnya menerima
fokus, jadi sebaiknya selalu tampilkan indikator fokus.
Jika jawabannya adalah "tidak", kontrol dapat memilih untuk menampilkan indikator
fokus secara selektif. Contoh yang bagus adalah elemen <button>. Jika pengguna mengkliknya dengan
mouse atau layar sentuh, tindakan telah selesai, dan indikator fokus mungkin tidak
diperlukan. Namun, jika pengguna menavigasi dengan keyboard, sebaiknya
tampilkan indikator fokus sehingga pengguna dapat memutuskan apakah mereka ingin
mengklik kontrol menggunakan tombol 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 elemen tabindex akan menyebabkan perilaku lingkaran fokus default browser dimulai.
Antipola yang sangat umum adalah menghapus indikator fokus menggunakan CSS seperti:
/* Don't do this!!! */
:focus {
outline: none;
}
Cara yang lebih baik untuk mengatasi masalah ini adalah menggunakan kombinasi :focus dan polyfill :focus-visible. Blok pertama kode di bawah ini menunjukkan cara kerja polyfill, dan aplikasi contoh di bawahnya memberikan contoh penggunaan polyfill untuk mengubah indikator fokus pada tombol.
/*
This will hide the focus indicator if the element receives focus via the
mouse, but it will still show 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 {
…
}