Indikator fokus (sering ditandai dengan "lingkaran fokus") mengidentifikasi fokus pada halaman Anda. Untuk pengguna yang tidak dapat menggunakan {i>mouse<i}, alat ini ini sangat penting karena bertindak sebagai pengganti kursor mouse.
Jika indikator fokus {i>default<i} {i>browser<i} 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
:focus
kelas semu diterapkan setiap kali elemen difokuskan, terlepas dari input
perangkat (mouse, keyboard, stilus, dll.) atau metode yang digunakan untuk memfokuskannya. Misalnya,
<div> di bawah memiliki tabindex yang membuatnya dapat difokuskan. Alat ini juga memiliki
gaya kustom untuk status :focus-nya:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Terlepas dari apakah Anda menggunakan {i>mouse<i}
untuk mengkliknya atau {i>keyboard<i} untuk menekannya,
<div> akan selalu terlihat sama.
Sayangnya, cara browser menerapkan fokus mungkin tidak konsisten. Apakah elemen yang tidak menerima fokus mungkin bergantung pada {i>browser<i} dan sistem operasi sistem file.
Misalnya, <button> di bawah juga memiliki gaya kustom untuk :focus-nya
status.
button:focus {
outline: 4px dashed orange;
}
Jika mengklik <button> dengan mouse di Chrome di macOS, Anda akan melihat
gaya fokus kustomnya. Namun, Anda tidak akan melihat gaya fokus kustom jika
klik <button> di Safari pada macOS. Hal ini karena di
Elemen Safari tidak menerima fokus saat Anda mengkliknya.
Karena perilaku fokus tidak konsisten, diperlukan sedikit pengujian di perangkat yang berbeda untuk memastikan gaya fokus Anda dapat diterima oleh pengguna.
Gunakan :focus-visible untuk menampilkan indikator fokus secara selektif
Yang baru
:focus-visible
kelas semu diterapkan setiap kali elemen menerima fokus dan
{i>browser<i} menentukan melalui heuristik bahwa
menampilkan indikator fokus akan
bermanfaat bagi pengguna. Khususnya, jika interaksi pengguna terbaru
adalah melalui keyboard dan penekanan tombol tidak menyertakan meta, ALT / OPTION,
atau tombol CONTROL, maka :focus-visible akan cocok.
Tombol dalam contoh di bawah ini akan menampilkan indikator fokus secara selektif. Jika Anda menggunakan {i>mouse<i} untuk mengkliknya, hasilnya akan berbeda dengan jika Anda pertama kali menggunakan {i>keyboard<i} untuk menekan tombol {i>tab<i}.
button:focus-visible {
outline: 4px dashed orange;
}
Menggunakan :focus-within untuk menata gaya induk elemen yang difokuskan
Tujuan
:focus-within
kelas semu diterapkan ke elemen baik ketika elemen itu sendiri menerima
fokus atau ketika elemen lain di dalam elemen itu menerima fokus.
Alat ini dapat digunakan untuk menyoroti bagian halaman untuk menggambar perhatian pengguna terhadap area tersebut. Misalnya, formulir di bawah ini menerima fokus saat formulir itu sendiri dipilih dan juga saat salah satu tombol pilihannya dipilih.
form:focus-within {
background: #ffecb3;
}
Waktu menampilkan indikator fokus
Aturan praktis yang baik adalah bertanya pada diri sendiri, "Jika Anda mengklik kontrol ini saat menggunakan perangkat seluler, apakah Anda ingin menampilkan {i>keyboard<i}?"
Jika jawabannya "ya", maka kontrol mungkin harus selalu menunjukkan fokus
indikator, terlepas dari perangkat input yang
digunakan untuk memfokuskannya. Contoh yang baik adalah
elemen <input type="text">. Pengguna harus mengirim input ke
elemen input melalui keyboard, terlepas dari bagaimana elemen input pada awalnya diterima
sehingga akan sangat membantu untuk selalu menampilkan indikator fokus.
Jika jawabannya "tidak," maka kontrol dapat memilih untuk
menampilkan fokus secara selektif
indikator. Contoh yang baik 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
menampilkan indikator fokus sehingga pengguna dapat
memutuskan apakah mereka ingin
klik kontrol menggunakan tombol ENTER atau SPACE.
Menghindarinoutline: none
Cara {i>browser<i} memutuskan kapan harus
menggambar indikator fokus, sejujurnya, sangat
membingungkan. Mengubah tampilan elemen <button> dengan CSS atau memberi
elemen tabindex akan menyebabkan perilaku lingkaran fokus default browser menjadi
{i>kick-in<i}.
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 ini menunjukkan cara
polyfill berfungsi, 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 {
…
}