Fokus

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: none pada elemen yang dapat menerima fokus keyboard.
• Hindari mengganti gaya outline dengan box-shadow. karena tidak muncul di Mode Kontras Tinggi Windows.
• Hanya tetapkan nilai positif untuk tabindex pada elemen HTML jika Anda benar-benar harus melakukannya.
• Pastikan status fokus sangat jelas vs. status default.

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang fokus