Indikator fokus (sering kali ditandai dengan "lingkaran fokus") mengidentifikasi elemen yang saat ini difokuskan di halaman Anda. Bagi pengguna yang tidak dapat menggunakan mouse, indikator ini sangat penting karena berfungsi sebagai pengganti kursor mouse mereka.
Jika indikator fokus default browser bertentangan dengan desain Anda, Anda dapat menggunakan CSS untuk menata ulang gayanya. Ingatlah untuk selalu mempertimbangkan pengguna keyboard Anda.
Gunakan :focus untuk selalu menampilkan indikator fokus
Pseudo-class :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. Elemen 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 beralih ke tab,
<div> akan selalu terlihat sama.
Sayangnya, browser dapat tidak konsisten dalam menerapkan fokus. Apakah elemen menerima fokus atau tidak mungkin bergantung pada browser dan sistem operasi.
Misalnya, <button> di bawah juga memiliki gaya kustom untuk status
:focus-nya.
button:focus {
outline: 4px dashed orange;
}
Jika mengklik <button> dengan mouse di Chrome pada 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 tidak menerima fokus saat Anda mengkliknya.
Karena perilaku fokus tidak konsisten, mungkin diperlukan sedikit pengujian di berbagai perangkat untuk memastikan gaya fokus Anda dapat diterima oleh pengguna.
Gunakan :focus-visible untuk menampilkan indikator fokus secara selektif
Pseudo-class
:focus-visible
baru diterapkan setiap kali elemen menerima fokus dan browser
menentukan melalui heuristik bahwa menampilkan indikator fokus akan
berguna bagi pengguna. Secara khusus, jika interaksi pengguna terbaru
adalah melalui keyboard dan penekanan tombol tidak menyertakan tombol meta, ALT / OPTION,
atau CONTROL, :focus-visible akan cocok.
Tombol dalam contoh di bawah akan secara selektif menampilkan indikator fokus. Jika Anda menggunakan mouse untuk mengkliknya, hasilnya akan berbeda jika Anda terlebih dahulu menggunakan keyboard untuk beralih ke 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 lain di dalam elemen tersebut menerima fokus.
Fungsi ini dapat digunakan untuk menandai area halaman guna menarik perhatian pengguna ke area tersebut. Misalnya, formulir di bawah menerima fokus baik saat formulir itu sendiri dipilih maupun saat salah satu tombol pilihannya dipilih.
form:focus-within {
background: #ffecb3;
}
Kapan harus menampilkan indikator fokus
Prinsip dasarnya adalah tanyakan pada diri sendiri, "Jika Anda mengklik kontrol ini saat menggunakan perangkat seluler, apakah Anda mengharapkannya menampilkan keyboard?"
Jika jawabannya "ya", kontrol mungkin selalu menampilkan indikator
fokus, terlepas dari perangkat input yang digunakan untuk memfokuskannya. Contoh yang baik adalah
elemen <input type="text">. Pengguna harus mengirim input ke
elemen melalui keyboard, terlepas dari cara elemen input awalnya menerima
fokus, jadi sebaiknya selalu tampilkan indikator fokus.
Jika jawabannya "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 akan selesai, dan indikator fokus mungkin tidak
diperlukan. Namun, jika pengguna menavigasi dengan keyboard, sebaiknya
tampilkan indikator fokus agar pengguna dapat memutuskan apakah mereka ingin
mengklik kontrol menggunakan tombol ENTER atau SPACE atau tidak.
Menghindarinoutline: none
Cara browser menentukan kapan harus menggambar indikator fokus, sejujurnya, sangat
membingungkan. Mengubah tampilan elemen <button> dengan CSS atau memberikan
tabindex ke elemen akan menyebabkan perilaku cincin fokus default browser
aktif.
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 kode pertama di bawah 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 {
…
}