Intinya...

Saat sebuah elemen menerima fokus, elemen tersebut harus sepenuhnya terlihat dan tidak tertutup oleh elemen lainnya.

Apa itu WCAG 2.4.12?

Setiap elemen yang menerima fokus keyboard harus selalu sepenuhnya terlihat di jendela browser pengguna. Ini memastikan bahwa elemen yang sedang difokuskan tidak tertutup oleh konten lain seperti header, footer, atau modal yang menempel (sticky).

Perbedaan

WCAG 2.4.11 Fokus Tidak Terhalang (Minimum) mengizinkan elemen yang difokuskan untuk terlihat sebagian saja. Namun, untuk memenuhi kriteria keberhasilan tingkat AAA yang lebih tinggi, yaitu WCAG 2.4.12, elemen yang difokuskan harus terlihat sepenuhnya.

Dua contoh yang menunjukkan tombol 'Contact Us' tertutup popup atau footer

Gambar menunjukkan tombol 'Contact Us' yang sebagian tertutup oleh notifikasi popup atau bagian footer, sehingga indikator fokusnya tersembunyi sebagian dan tidak memenuhi kriteria keberhasilan ini.

Kenapa ini penting?

Saat elemen yang sedang difokuskan tersembunyi atau tertutup dari tampilan, pengguna yang mengandalkan keyboard atau teknologi bantu tidak bisa mengetahui di mana interaksi mereka sedang berlangsung. Ini membuat navigasi dan penyelesaian tugas jadi lebih sulit, dan bisa menyebabkan frustrasi. Elemen yang tersembunyi juga bisa membuat seolah-olah sistem tidak merespons—padahal sebenarnya sedang bekerja. Jika pengguna tidak melihat indikator yang jelas tentang apa yang sedang difokuskan, mereka bisa mengira ada yang rusak.

Siapa yang terpengaruh?

Pengguna yang mengandalkan keyboard atau teknologi bantu untuk navigasi, pengguna dengan penglihatan rendah, dan pengguna dengan disabilitas kognitif.

Pengguna yang menavigasi menggunakan keyboard atau perangkat yang menggunakan input mirip keyboard (misalnya, kontrol suara, perangkat sip-and-puff) perlu melihat elemen yang sedang difokuskan untuk memahami posisi mereka di halaman.

Pengguna low vision yang mengandalkan tampilan layar yang diperbesar sering melihat halaman dengan konten yang terbatas. Memastikan elemen yang difokuskan tetap terlihat mencegahnya tersembunyi atau terpotong.

Pengguna dengan disabilitas kognitif memerlukan indikator visual fokus yang jelas, yang mengurangi kebingungan dan membantu mereka tetap terarah saat menavigasi.

Cara menerapkan WCAG 2.4.12

Bagian ini menawarkan penjelasan yang disederhanakan dan contoh-contoh untuk membantu kamu memulai. Untuk panduan lengkap, selalu rujuk ke dokumentasi resmi WCAG.

Uji visibilitas fokus

Saat pengguna menekan tombol tab untuk berpindah fokus di halaman, semua elemen yang difokuskan harus tetap terlihat sepenuhnya. Pastikan konten lain seperti modal, banner, atau dialog tidak menutupi elemen yang sedang difokuskan.

  • Desain dialog modal agar mengambil fokus saat muncul dan mencegah interaksi dengan konten di bawahnya. Ini mencegah elemen interaktif yang tersembunyi di belakang modal mengambil fokus.
  • Pastikan notifikasi seperti banner cookie bisa ditutup, agar tidak menutupi elemen yang bisa difokuskan.
  • Periksa konten yang diperbesar hingga 200%, sesuai WCAG 1.4.4 Mengubah Ukuran Teks, untuk memastikan tata letak yang diperbesar tidak menyembunyikan elemen interaktif. Gunakan pseudo-class :focus-visible untuk memberi gaya indikator fokus dengan jelas tanpa mengganggu pengguna mouse.

Elemen yang difokuskan harus terlihat sepenuhnya untuk memenuhi standar AAA yang ditingkatkan. Jika fokus hanya terlihat sebagian, itu dianggap gagal pada kriteria keberhasilan ini.

Elemen transparan

Meskipun elemen transparan atau tembus pandang tidak sepenuhnya menutupi elemen yang difokuskan, mereka bisa mempengaruhi visibilitas indikator fokus, yang berpotensi melanggar WCAG 1.4.11 Kontras Non-Teks dan WCAG 2.4.13 Penampilan Fokus.

Penting untuk memastikan elemen yang difokuskan selalu terlihat dengan jelas dan dapat diakses, agar pengguna dapat dengan mudah mengetahui elemen mana yang sedang difokuskan.

2=Popup transparan di tengah layar

Gambar yang menunjukkan tombol 'Contact Us' dengan popup transparan yang menghalangi, sehingga indikator fokus menjadi sulit terlihat.

Scroll Padding dengan CSS

Properti scroll-padding dalam CSS membantu memastikan elemen yang difokuskan tetap terlihat saat menavigasi halaman. Properti ini mengatur ruang di sekitar area yang bisa di-scroll untuk mencegah elemen tertutup oleh komponen tetap seperti header atau footer yang menempel.

Contohnya, nilai scroll-padding-top dan scroll-padding-bottom mengatur tata letak halaman agar elemen interaktif seperti kolom formulir atau tombol tetap terlihat saat difokuskan.

html {
  scroll-padding-top: 100px; /* Ruang untuk sticky header */
  scroll-padding-bottom: 50px; /* Ruang untuk sticky footer */
}

Sebagai tambahan, properti scroll-behavior membantu membuat transisi scrolling menjadi halus, sehingga perpindahan fokus tidak terasa tiba-tiba.

/* Contoh penggunaan untuk navigasi keyboard yang halus */
body {
  scroll-behavior: smooth;
}

Tampilan sebuah halaman web

CSS padding diterapkan pada tombol yang menerima fokus dengan properti scroll-padding.

Auto-scrolling dengan JavaScript

Sebagian besar browser modern secara otomatis men-scroll elemen yang difokuskan agar terlihat, jadi scripting tambahan biasanya tidak diperlukan. Namun, dalam beberapa kasus—seperti dengan komponen kustom, overlay, atau formulir panjang—perilaku default browser mungkin tidak bekerja sesuai harapan. Untuk skenario tersebut, kamu bisa menggunakan JavaScript untuk memastikan elemen yang difokuskan tetap terlihat.

Kesimpulan

Memastikan elemen yang difokuskan terlihat sepenuhnya adalah cara sederhana untuk membuat antarmuka lebih aksesibel dan ramah pengguna. Mengikuti WCAG 2.4.12 Fokus Tidak Terhalang (Tingkat Lanjut) membantu menghilangkan hambatan bagi pengguna keyboard, orang dengan penglihatan rendah, dan siapa saja dengan tantangan kognitif. Dengan menggunakan alat seperti scroll-padding di CSS dan beberapa penyesuaian JavaScript, kamu dapat menciptakan navigasi yang lebih halus dan mudah.