Indikator fokus (sering 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 mempertimbangkan pengguna {i>keyboard<i} Anda.
Gunakan :focus untuk selalu menampilkan indikator fokus
Class semu :focus
diterapkan setiap kali elemen difokuskan, apa pun 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 membukanya,
<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
dilakukan melalui keyboard dan penekanan tombol tidak menyertakan meta, tombol ALT / OPTION,
atau CONTROL, maka :focus-visible akan cocok.
Tombol dalam contoh di bawah akan secara selektif menampilkan indikator fokus. Jika menggunakan mouse untuk mengkliknya, hasilnya akan berbeda dengan jika Anda pertama kali menggunakan keyboard untuk mengetuknya.
button:focus-visible {
outline: 4px dashed orange;
}
Menggunakan :focus-within untuk menata gaya induk elemen yang difokuskan
Class semu
:focus-within
diterapkan ke elemen baik saat elemen itu sendiri menerima
fokus atau saat elemen lain di dalam elemen tersebut menerima fokus.
Dapat digunakan untuk menandai wilayah 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;
}
Waktu 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", maka kontrol mungkin harus selalu menampilkan indikator
fokus, terlepas dari perangkat input yang digunakan untuk memfokuskannya. Contohnya 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", maka kontrol dapat memilih untuk menampilkan indikator
fokus secara selektif. Contoh yang bagus adalah elemen <button>. Jika pengguna mengkliknya dengan
mouse atau layar sentuh, tindakan 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 pada elemen akan menyebabkan perilaku lingkaran fokus default browser dimulai.
Anti-pola 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 menunjukkan cara kerja polyfill, dan aplikasi contoh di bawahnya menyediakan 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 {
…
}