Fokus gaya

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.

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. 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", 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 {
  
}