2.4.13 Penampilan Fokus

Apa itu WCAG 2.4.13?

Indikator fokus keyboard harus jelas terlihat bagi pengguna yang mengandalkan navigasi dengan keyboard. Saat pengguna menavigasi halaman menggunakan keyboard, elemen yang menerima fokus harus mudah dilihat dengan menambahkan border, outline, atau perubahan warna yang mencolok dan memastikan perubahan tersebut memiliki kontras yang cukup dengan elemen aslinya.

Indikator fokus secara visual menandai elemen yang saat ini memiliki fokus keyboard. Kriteria keberhasilan ini memastikan bahwa gaya indikator terlihat dengan jelas, bukan hanya ada.

Perbandingan dengan 2.4.7 Focus Jelas Terlihat

Tujuan utama WCAG 2.4.7 Focus Jelas Terlihat adalah memastikan indikator fokus ada dan diterapkan pada elemen saat mereka menerima fokus. Namun, WCAG 2.4.13 lebih menekankan pada seberapa jelas indikator fokus muncul, bukan hanya bahwa indikator itu ada.

Mengapa ini penting?

Bagi pengguna yang mengandalkan navigasi keyboard, mengetahui elemen mana yang sedang fokus di halaman web sangat penting. Tanpa indikator fokus yang jelas, pengguna bisa bingung atau salah saat menavigasi elemen interaktif seperti tombol, tautan, atau kolom formulir.

Bayangkan menggunakan situs tanpa tahu tautan mana yang akan diklik atau kolom formulir mana yang sedang diisi. Indikator fokus yang jelas dan mudah terlihat memastikan pengguna dapat mengikuti alur interaksi, mengurangi kesalahan, dan berinteraksi dengan konten lebih percaya diri.

Siapa yang terpengaruh?

Pengguna dengan gangguan mobilitas, pengguna dengan disabilitas kognitif, dan pengguna low vision.

Pengguna dengan gangguan mobilitas sering menggunakan navigasi keyboard untuk berinteraksi dengan situs web. Indikator fokus yang terlihat dan mudah dikenali mengurangi beban dan memperbaiki navigasi, sehingga interaksi menjadi lebih lancar dan tepat.

Pengguna dengan disabilitas kognitif seperti ADHD, disleksia, atau keterbatasan memori jangka pendek mendapat manfaat dari indikator fokus yang membantu mereka melacak posisi di halaman dan menghindari gangguan.

Pengguna low vision, termasuk yang menggunakan pembesar layar, mendapatkan manfaat dari indikator fokus yang besar dan kontras tinggi, sehingga lebih mudah melacak fokus saat menavigasi.

Cara menerapkan WCAG 2.4.13

Ukuran dan kontras untuk elemen yang difokuskan

Untuk memenuhi kriteria keberhasilan ini, indikator fokus harus cukup besar agar terlihat dan memiliki kontras yang cukup untuk memenuhi WCAG 1.4.11 Kontras Non-Teks. Ada dua cara untuk memenuhinya:

• Indikator fokus harus setebal minimal 2px dan memiliki kontras minimal 3:1 dengan piksel di sekitarnya, atau
• Seluruh elemen harus berubah warna dan memiliki kontras minimal 3:1 antara keadaan fokus dan tidak fokus.

Navigasi halaman web dengan keyboard dan pastikan semua indikator fokus memenuhi salah satu persyaratan ini. Ini termasuk tombol, tautan, kolom formulir, dan komponen kustom.

Indikator fokus inset

Indikator fokus inset, seperti border di dalam komponen, lebih sulit terlihat. Untuk memenuhi persyaratan area minimum, indikator ini harus cukup tebal, biasanya setidaknya 3px, agar tetap terlihat. Jika memungkinkan, gunakan indikator di luar atau offset.

Jangan mengandalkan default browser atau sistem operasi

Sebagian besar browser dan sistem operasi secara otomatis menyorot kontrol standar seperti kolom teks dan tautan saat menerima fokus. Namun, default ini bisa tidak konsisten di berbagai platform dan mungkin tidak memenuhi persyaratan kontras atau ukuran. Gunakan gaya kustom untuk memastikan kepatuhan.

Berikan style pada indikator fokus menggunakan CSS

Gunakan pseudo-class CSS :focus-visible dan :focus untuk memberi gaya khusus pada elemen saat mendapat fokus.

:focus-visible sangat berguna karena hanya menargetkan navigasi keyboard, sehingga cincin fokus hanya muncul untuk pengguna yang membutuhkannya.

a:focus-visible {
    outline: 2px solid blue;
}

Indikator fokus juga berguna untuk pengguna mouse. Misalnya, saat mengisi formulir, penting untuk melihat dengan jelas kolom mana yang sedang aktif.

input[type="text"]:focus {
    outline: 2px solid red;
    background-color: pink;
}

Indikator fokus dua warna

Teknik ini menggunakan dua garis luar (outline) atau bayangan kotak (box-shadow) dengan kontras 9:1 antara dua warna, sehingga sangat terlihat pada latar belakang solid mana pun. Teknik ini paling efektif pada latar belakang datar (bukan gradien atau gambar).

Gunakan outline transparan agar indikator tetap terlihat pada mode high-contrast.

a:focus-visible {
    /* Makes visible in forced-color modes */
    outline: 2px solid transparent; 
    /* Light and dark contrast colors */
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
}

Pertimbangan mode forced-colors

Di mode Windows High Contrast atau pengaturan forced-color serupa, gaya seperti box-shadow mungkin akan diabaikan. Menggunakan outline: transparent memastikan browser tetap menampilkan gaya fokus default sistem.

Kesimpulan

Kriteria keberhasilan WCAG 2.4.13 memastikan pengguna keyboard dapat dengan mudah mengidentifikasi elemen yang sedang fokus, sehingga mempermudah interaksi dengan situs web. Dengan menggunakan ukuran dan kontras indikator fokus yang cukup, serta menghindari gaya yang mudah diabaikan, kamu meningkatkan aksesibilitas bagi pengguna dengan tantangan mobilitas, disabilitas kognitif, dan low vision.