Podcast CSS - 018: Fokus
Di halaman web, Anda mengklik link yang mengarahkan pengguna ke konten utama situs. Link ini sering disebut sebagai link lewati, atau link anchor. Saat link tersebut diaktifkan oleh keyboard, menggunakan tombol tab dan enter, penampung konten utama memiliki lingkaran fokus di sekelilingnya. Why is that?
Hal ini karena <main>
memiliki nilai atribut tabindex="-1"
,
yang berarti dapat difokuskan secara terprogram.
Ketika <main>
ditargetkan—karena #main-content
di kolom URL browser cocok dengan id
—opsi ini akan menerima fokus terprogram.
Anda mungkin ingin menghapus gaya fokus dalam situasi ini,
tetapi menangani fokus dengan tepat dan hati-hati akan membantu menciptakan pengalaman
pengguna yang baik dan mudah diakses.
Ini juga bisa menjadi tempat yang bagus untuk menambah daya tarik interaksi.
Mengapa fokus itu penting?
Sebagai pengembang web, tugas Anda adalah membuat situs web dapat diakses dan inklusif untuk semua. Membuat status fokus yang dapat diakses dengan CSS adalah bagian dari tanggung jawab ini.
Gaya fokus membantu orang yang menggunakan perangkat seperti keyboard atau kontrol tombol untuk membuka dan berinteraksi dengan situs. Jika sebuah elemen menerima fokus dan tidak ada indikasi visual, pengguna mungkin tidak dapat melacak apa yang sedang menjadi fokus. Hal ini dapat menyebabkan masalah navigasi dan mengakibatkan perilaku yang tidak diinginkan jika, misalnya, link yang salah diikuti.
Cara elemen mendapatkan fokus
Elemen tertentu dapat difokuskan secara otomatis;
yaitu elemen yang menerima interaksi dan input, seperti <a>
,
<button>
, <input>
, dan <select>
.
Singkatnya, semua elemen formulir, tombol, dan tautan.
Biasanya, Anda dapat membuka elemen situs yang dapat difokuskan menggunakan tombol tab untuk melanjutkan halaman, dan shift + tab untuk berpindah mundur.
Ada juga atribut HTML yang disebut tabindex
yang memungkinkan Anda mengubah indeks tab, yaitu
urutan elemen yang difokuskan—setiap kali seseorang menekan tombol tab,
atau fokus digeser dengan perubahan hash di URL atau oleh peristiwa JavaScript.
Jika tabindex
pada elemen HTML disetel ke 0
, elemen tersebut dapat menerima fokus melalui tombol tab dan akan mengikuti indeks tab global, yang ditetapkan oleh urutan sumber dokumen.
Jika Anda menetapkan tabindex
ke -1
, ini hanya dapat menerima fokus secara terprogram, yang berarti hanya saat peristiwa JavaScript terjadi atau perubahan hash (cocok dengan id
elemen di URL) terjadi.
Jika Anda menetapkan tabindex
ke nilai yang lebih tinggi dari 0
, item tersebut akan dihapus dari indeks tab global, yang ditentukan oleh urutan sumber dokumen.
Urutan tab kini akan ditentukan oleh nilai tabindex
,
sehingga elemen dengan tabindex="1"
akan menerima fokus sebelum elemen dengan tabindex="2"
, misalnya.
Menata gaya fokus
Perilaku browser default saat elemen menerima fokus adalah menampilkan lingkaran fokus. Lingkaran fokus ini bervariasi antara browser dan sistem operasi.
Perilaku ini dapat diubah dengan CSS,
menggunakan class pseudo :focus
, :focus-within
, dan :focus-visible
yang telah Anda pelajari di
pelajaran class pseudo.
Penting untuk menetapkan gaya fokus yang memiliki kontras dengan gaya default suatu elemen.
Misalnya, pendekatan yang umum digunakan adalah menggunakan properti outline
.
a:focus {
outline: 2px solid slateblue;
}
Properti outline
dapat muncul terlalu dekat dengan teks link,
tetapi properti outline-offset
dapat membantu hal tersebut,
karena menambahkan padding
visual tambahan tanpa memengaruhi ukuran geometris yang diisi elemen.
Nilai angka positif untuk outline-offset
akan mendorong garis batas ke luar, sedangkan nilai negatif akan menarik garis ke dalam.
Saat ini, di beberapa browser,
jika Anda menyetel border-radius
pada elemen dan menggunakan outline
,
elemen tersebut tidak akan cocok—garis batasnya akan memiliki sudut tajam.
Oleh karena itu,
Anda tergoda untuk menggunakan box-shadow
dengan radius blur kecil karena box-shadow
diklip ke bentuk tersebut,
sesuai dengan border-radius
,
tetapi gaya ini tidak akan ditampilkan dalam Mode Kontras Tinggi Windows.
Hal ini karena Mode Kontras Tinggi Windows tidak menerapkan bayangan,
dan sebagian besar mengabaikan gambar latar untuk mendukung setelan pilihan pengguna.
Ringkasan
Membuat status fokus yang kontras dengan status default elemen sangat penting. Gaya browser default telah melakukannya untuk Anda, namun jika Anda ingin mengubah perilaku ini, ingatlah hal berikut:
- Hindari penggunaan
outline: none
pada elemen yang dapat menerima fokus keyboard. - Hindari mengganti gaya
outline
denganbox-shadow
. karena mereka tidak muncul dalam Mode Kontras Tinggi Windows. - Hanya tetapkan nilai positif untuk
tabindex
pada elemen HTML jika Anda benar-benar membutuhkannya. - Pastikan status fokus sangat jelas dibandingkan dengan status default.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang fokus
Manakah dari berikut ini yang merupakan elemen yang dapat difokuskan secara otomatis?
<a>
<p>
<button>
<input>
<output>
<select>
Manakah dari perangkat input berikut ini yang dapat menyetel fokus?