Intinya...

Saat sebuah elemen menerima fokus, elemen tersebut harus setidaknya terlihat sebagian.

Apa itu WCAG 2.4.11?

Setiap elemen yang menerima fokus keyboard harus selalu setidaknya sebagian terlihat di jendela browser pengguna. Ini memastikan bahwa elemen yang terfokus tidak sepenuhnya tertutupi oleh konten lain seperti header tetap, footer, atau modal. Meskipun lebih baik jika elemen tetap sepenuhnya terlihat, hal ini tidak diwajibkan di level AA.

Tombol Contact Us tertutupi banner

Contoh dari sebuah tombol 'Contact Us' yang menerima fokus, namun sebuah banner tetap menutupi setengah bagian atasnya, membuatnya lebih sulit bagi pengguna untuk berinteraksi.

Mengapa ini penting?

Ketika elemen yang terfokus tersembunyi atau terblokir dari pandangan, pengguna yang mengandalkan keyboard atau teknologi bantu tidak bisa mengetahui di mana interaksi mereka terjadi. Ini membuat navigasi dan penyelesaian tugas menjadi lebih sulit, yang berujung pada frustrasi. Elemen yang tersembunyi juga dapat membuat sistem terlihat tidak merespons.

Siapa yang terpengaruh?

Pengguna yang mengandalkan keyboard atau teknologi bantu untuk menavigasi, pengguna low vision, dan pengguna dengan disabilitas kognitif.

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

Pengguna low vision yang mengandalkan layar pembesar sering kali melihat halaman dengan konten yang berkurang. Memastikan elemen yang terfokus tetap terlihat mencegah elemen tersebut tersembunyi atau terpotong.

Pengguna dengan disabilitas kognitif membutuhkan indikator visual yang jelas tentang fokus, yang mengurangi kebingungannya dan membantu pengguna tetap terorientasi saat menavigasi.

Cara menerapkan WCAG 2.4.11

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 berpindah menggunakan tab, semua elemen yang terfokus harus tetap setidaknya sebagian terlihat. Pastikan konten lain, seperti modal, banner, atau dialog, tidak sepenuhnya menghalangi elemen yang terfokus.

  • Desainlah dialog modal sedemikian rupa sehingga elemen tersebut mengambil fokus saat muncul dan mencegah interaksi dengan konten yang ada di bawahnya. Hal ini mencegah elemen interaktif yang tersembunyi di belakang modal untuk mengambil fokus.
  • Pastikan pemberitahuan seperti banner cookie dapat ditutup (dismissible), mencegah pemberitahuan tersebut menutupi elemen yang bisa difokuskan.
  • Periksa konten yang diperbesar hingga 200%, sesuai dengan WCAG 1.4.4 Mengubah Ukuran Teks, untuk memastikan layout yang diperbesar tidak menyembunyikan elemen interaktif.

Scroll padding dengan CSS

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

Dalam contoh ini, nilai scroll-padding-top dan scroll-padding-bottom menyesuaikan tata letak halaman untuk memastikan elemen interaktif, seperti kolom formulir atau tombol, terlihat saat terfokus. Sebagai tambahan, properti scroll-behavior membantu menciptakan transisi gulir yang halus sehingga pergeseran mendadak tidak terlalu tajam.

html {
    scroll-padding-top: 100px; /* Space for a sticky header */
    scroll-padding-bottom: 50px; /* Space for a sticky footer */
}
/* Example usage for smooth keyboard navigation */
body {
    scroll-behavior: smooth;
}

Tombol Contact Us tidak tertutup banner

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

Scroll otomatis dengan JavaScript

Sebagian besar browser modern secara otomatis men-scroll elemen yang terfokus agar terlihat, sehingga pemrograman tambahan biasanya tidak diperlukan. Namun, dalam beberapa kasus, seperti dengan komponen kustom, overlay, atau formulir panjang, perilaku default browser mungkin tidak berfungsi sebagaimana mestinya. Untuk skenario ini, kamu dapat menggunakan JavaScript untuk memastikan elemen yang terfokus tetap terlihat.

Kesimpulan

Memastikan elemen yang terfokus setidaknya terlihat sebagian adalah cara sederhana untuk membuat antarmuka lebih aksesibel dan ramah pengguna. Mengikuti WCAG 2.4.11 Fokus Tidak Terhalang (Minimum) membantu menghilangkan hambatan bagi pengguna keyboard, pengguna low vision, dan siapa saja yang mengalami tantangan kognitif. Dengan menggunakan alat seperti scroll-padding dalam CSS dan beberapa penyesuaian JavaScript, kamu bisa menciptakan navigasi yang lebih mulus dan lebih mudah.