Podcast CSS - 018: Fokus
Di halaman web, Anda mengeklik tautan yang mengarahkan pengguna ke konten utama {i>website<i}. 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 cincin fokus di sekitarnya. Mengapa demikian?
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—opsi ini menerima fokus terprogram.
Anda tergoda untuk
menghapus gaya fokus dalam situasi ini,
tetapi menangani fokus dengan tepat dan
dengan hati-hati membantu menciptakan
aksesibel, {i>user experience<i}.
Ini juga bisa menjadi tempat yang bagus untuk menambahkan beberapa minat pada interaksi.
Mengapa fokus itu penting?
Sebagai seorang pengembang web, tugas Anda untuk membuat situs web yang mudah 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 untuk menavigasi dan berinteraksi dengan sebuah {i>website<i}. Jika sebuah elemen menerima fokus dan tidak ada indikasi visual, pengguna mungkin tidak dapat mengetahui apa yang menjadi fokusnya. Hal ini dapat menimbulkan masalah navigasi dan mengakibatkan perilaku yang tidak diinginkan jika, misalnya, tautan yang salah diikuti.
Cara elemen mendapatkan fokus
Elemen-elemen tertentu secara otomatis dapat difokuskan;
ini adalah elemen yang menerima interaksi dan input, seperti <a>,
<button>, <input>, dan <select>.
Singkatnya, semua elemen formulir, tombol, dan link.
Anda biasanya dapat menjelajahi elemen situs yang dapat difokuskan menggunakan tombol tab untuk melanjutkan halaman, dan shift + tab untuk mundur.
Ada juga atribut HTML yang disebut tabindex yang memungkinkan Anda mengubah indeks tab—yang merupakan
urutan elemen yang difokuskan—setiap kali seseorang menekan tombol tab,
atau fokusnya digeser dengan perubahan hash di URL atau oleh peristiwa JavaScript.
Jika tabindex pada elemen HTML disetel ke 0,
aplikasi tersebut dapat menerima fokus melalui tombol tab dan mengikuti indeks tab global,
yang ditentukan oleh
urutan sumber dokumen.
Jika Anda menetapkan tabindex ke -1, fungsi ini hanya dapat menerima fokus secara terprogram,
yang berarti hanya saat peristiwa JavaScript terjadi
atau terjadi perubahan hash (yang cocok dengan id elemen di URL).
Jika Anda menetapkan tabindex lebih tinggi dari 0,
itu akan dihapus dari indeks tab global,
yang ditentukan oleh
urutan sumber dokumen.
Urutan tab kini akan ditentukan oleh nilai tabindex,
jadi elemen dengan tabindex="1" akan menerima fokus sebelum elemen dengan tabindex="2", misalnya.
Fokus gaya visual
Perilaku browser default saat elemen menerima fokus adalah menampilkan cincin fokus. Lingkaran fokus ini bervariasi antara browser dan sistem operasi.
Perilaku ini dapat diubah dengan CSS,
menggunakan :focus, :focus-within, dan :focus-visible
kelas semu yang telah Anda pelajari di
pelajaran kelas pseudo.
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 bisa muncul terlalu dekat dengan teks link,
tetapi properti outline-offset dapat membantu Anda,
karena menambahkan padding visual tambahan tanpa memengaruhi ukuran geometris yang diisi elemen.
Nilai angka positif untuk outline-offset akan mendorong garis batas ke luar,
nilai negatif akan menarik garis batas ke dalam.
Saat ini di beberapa {i>browser<i},
jika Anda memiliki border-radius yang disetel pada elemen dan menggunakan outline,
hasilnya tidak akan cocok—garis batasnya akan bersudut tajam.
Karena ini,
Anda tergoda untuk menggunakan box-shadow dengan radius blur kecil karena box-shadow dijepitkan ke bentuknya,
untuk menghormati border-radius,
tetapi gaya ini tidak akan ditampilkan dalam Mode Kontras Tinggi Windows.
Hal ini karena Mode Kontras Tinggi
Windows tidak menerapkan bayangan,
dan umumnya mengabaikan gambar latar
untuk memilih pengaturan pilihan pengguna.
Ringkasan
Membuat status fokus yang kontras dengan status default elemen sangat penting. Gaya browser default sudah melakukannya untuk Anda, namun jika Anda ingin mengubah perilaku ini, ingatlah yang berikut:
- Hindari penggunaan
outline: nonepada elemen yang dapat menerima fokus keyboard. - Hindari mengganti gaya
outlinedenganbox-shadow. karena tidak muncul dalam Mode Kontras Tinggi Windows. - Hanya tetapkan nilai positif untuk
tabindexpada elemen HTML jika Anda harus melakukannya. - Pastikan status fokus sangat jelas vs. 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 yang dapat menyetel fokus?