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 akan memiliki cincin fokus di sekelilingnya. Mengapa demikian?
Hal ini karena <main> memiliki nilai atribut tabindex="-1",
yang berarti dapat difokuskan secara terprogram.
Saat <main> ditargetkan—karena #main-content
di kolom URL browser cocok dengan id—<main> 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 menambahkan beberapa minat ke interaksi.
Mengapa fokus itu penting?
Sebagai developer web, tugas Anda adalah membuat situs dapat diakses dan inklusif bagi semua orang. 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 akses untuk menavigasi dan berinteraksi dengan situs. Jika elemen menerima fokus dan tidak ada indikasi visual, pengguna mungkin kehilangan jejak apa yang sedang difokuskan. Hal ini dapat menyebabkan masalah navigasi dan menghasilkan perilaku yang tidak diinginkan jika, misalnya, link yang salah diikuti.
Cara elemen mendapatkan fokus
Elemen tertentu dapat difokuskan secara otomatis;
ini adalah elemen yang menerima interaksi dan input, seperti <a>,
<button>, <input>, dan <select>.
Singkatnya, semua elemen formulir, tombol, dan link.
Anda biasanya dapat menavigasi elemen yang dapat difokuskan di situs menggunakan tombol tab untuk melanjutkan di halaman, dan shift + tab untuk mundur.
Ada juga atribut HTML yang disebut tabindex yang memungkinkan Anda mengubah indeks tab—yang merupakan
urutan fokus elemen—setiap kali seseorang menekan tombol tab,
atau fokus dialihkan dengan perubahan hash di URL atau oleh peristiwa JavaScript.
Jika tabindex pada elemen HTML disetel ke 0, elemen ini dapat menerima fokus melalui tombol tab dan akan mengikuti indeks tab global, yang ditentukan oleh urutan sumber dokumen.
Jika Anda menetapkan tabindex ke -1, tabindex hanya dapat menerima fokus secara terprogram,
yang berarti hanya saat peristiwa JavaScript terjadi
atau perubahan hash (yang cocok dengan id elemen di URL) terjadi.
Jika Anda menetapkan tabindex menjadi lebih tinggi dari 0, nilai tersebut akan dihapus dari indeks tab global, yang ditentukan berdasarkan urutan sumber dokumen.
Urutan tab sekarang akan ditentukan oleh nilai tabindex,
sehingga elemen dengan tabindex="1" akan menerima fokus sebelum elemen dengan tabindex="2", misalnya.
Penataan 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 pseudo-class :focus, :focus-within, dan :focus-visible
yang telah Anda pelajari di
pelajaran pseudo-class.
Penting untuk menetapkan gaya fokus yang memiliki kontras dengan gaya default elemen.
Misalnya, pendekatan yang umum adalah menggunakan properti outline.
a:focus {
outline: 2px solid slateblue;
}
Properti outline mungkin tampak 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 batas ke dalam.
Saat ini di beberapa browser,
jika Anda menetapkan border-radius pada elemen dan menggunakan outline,
elemen tersebut tidak akan cocok—garis batas akan memiliki sudut tajam.
Karena itu,
Anda mungkin ingin menggunakan box-shadow dengan radius blur kecil karena box-shadow dijepitkan sesuai bentuk untuk
menghormati border-radius,
tetapi gaya ini tidak akan ditampilkan di Mode Kontras Tinggi Windows.
Hal ini karena Mode Kontras Tinggi Windows tidak menerapkan bayangan,
dan sebagian besar mengabaikan gambar latar untuk memilih setelan pilihan pengguna.
Ringkasan
Membuat status fokus yang memiliki kontras dengan status default elemen sangatlah penting. Gaya browser default sudah melakukannya untuk Anda, tetapi jika Anda ingin mengubah perilaku ini, ingatlah hal berikut:
- Hindari penggunaan
outline: nonepada elemen yang dapat menerima fokus keyboard. - Hindari mengganti gaya
outlinedenganbox-shadow. karena tidak muncul di Mode Kontras Tinggi Windows. - Hanya tetapkan nilai positif untuk
tabindexpada elemen HTML jika Anda benar-benar harus melakukannya. - Pastikan status fokus sangat jelas vs. status default.
Memeriksa 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 yang dapat menetapkan fokus?