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 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 dengan box-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