Pada artikel sebelumnya kita telah mempelajari cara membuat indikator fokus menggunakan :focus-visible agar pengguna keyboard selalu mengetahui posisi fokus mereka.

Sekarang bayangkan situasi berikut.

Anda membuka sebuah situs berita atau toko daring yang memiliki menu navigasi sangat panjang.

Di bagian atas halaman terdapat puluhan tautan menuju berbagai kategori, promosi, akun, bantuan, dan menu lainnya.

Setiap kali berpindah ke halaman baru, Anda harus menekan tombol Tab berkali-kali hanya untuk melewati seluruh menu sebelum akhirnya sampai pada isi artikel.

Tentu hal ini melelahkan.

Bagi pengguna keyboard maupun screen reader, pengalaman seperti ini terjadi hampir di setiap halaman apabila website tidak menyediakan mekanisme untuk melewati blok navigasi yang berulang.

Selain itu, masih ada masalah lain yang sering dijumpai.

Saat sebuah dialog (modal) dibuka, fokus keyboard justru berpindah ke tombol atau tautan yang berada di belakang dialog, sehingga pengguna kehilangan konteks.

Dua masalah tersebut dapat diatasi menggunakan dua teknik penting dalam aksesibilitas web:

1. Skip Link untuk melewati blok navigasi yang berulang.
2. Focus Trap untuk menjaga fokus tetap berada di dalam dialog selama dialog masih terbuka.

Mari kita bahas satu per satu.

1. Skip Link: Langsung Menuju Konten Utama

WCAG melalui Success Criterion 2.4.1 – Bypass Blocks menganjurkan agar pengguna memiliki cara untuk melewati blok konten yang muncul berulang pada setiap halaman, seperti menu navigasi, banner, atau sidebar.

Solusi yang paling umum adalah menyediakan Skip Link.

Skip Link merupakan tautan yang ditempatkan di awal halaman dan memungkinkan pengguna langsung menuju konten utama tanpa harus melewati seluruh menu navigasi.

Contoh HTML

Tempatkan Skip Link segera setelah tag <body>.

Perhatikan bahwa atribut href mengarah ke id pada elemen <main>.

Contoh CSS

Skip Link biasanya disembunyikan dari tampilan awal, tetapi tetap dapat menerima fokus keyboard.

Dengan cara ini:

1. pengguna mouse hampir tidak pernah melihat Skip Link;
2. pengguna keyboard akan langsung melihatnya saat pertama kali menekan tombol Tab.

Catatan: Hindari menggunakan display: none atau visibility: hidden untuk Skip Link, karena elemen tersebut tidak lagi dapat menerima fokus keyboard dan umumnya tidak dapat diakses oleh teknologi bantu.

Mengapa Skip Link Penting?

Bayangkan menu navigasi memiliki 40 tautan.

Tanpa Skip Link, pengguna keyboard harus menekan Tab puluhan kali setiap kali membuka halaman baru.

Dengan Skip Link, mereka cukup:

Perbedaan ini mungkin hanya beberapa detik, tetapi sangat berarti bagi pengguna yang mengandalkan keyboard sepanjang waktu.

2. Focus Trap pada Dialog (Modal)

Masalah lain yang sering ditemui adalah pengelolaan fokus ketika dialog (modal) dibuka.

Misalnya pengguna membuka dialog konfirmasi untuk menghapus data.

Secara visual, halaman belakang menjadi redup dan tidak lagi dapat digunakan.

Namun ketika tombol Tab ditekan, fokus justru berpindah ke menu atau tombol yang berada di belakang dialog.

Keadaan ini sering disebut sebagai focus leak, yaitu fokus "bocor" keluar dari dialog.

Akibatnya pengguna kehilangan konteks dan dapat mengaktifkan elemen yang sebenarnya tidak sedang dapat diakses.

Apa Itu Focus Trap?

Focus Trap adalah teknik pengelolaan fokus (focus management) yang memastikan fokus keyboard tetap berada di dalam dialog selama dialog tersebut masih terbuka.

Selama dialog aktif:

1. tombol Tab hanya berpindah ke elemen di dalam dialog;
2. Shift + Tab juga tetap berada di dalam dialog;
3. pengguna tidak dapat berpindah ke elemen di belakang halaman.

Ketika dialog ditutup, fokus sebaiknya dikembalikan ke elemen yang sebelumnya membuka dialog agar pengguna tidak kehilangan posisi.

Implementasi

Apabila menggunakan JavaScript murni, Anda perlu mengelola fokus secara manual, misalnya dengan:

1. memindahkan fokus ke elemen pertama saat dialog dibuka;
2. menjaga fokus tetap berada di dalam dialog ketika pengguna menekan Tab atau Shift + Tab;
3. mengembalikan fokus ke tombol pembuka ketika dialog ditutup.

Pada aplikasi modern, pengelolaan tersebut umumnya telah disediakan oleh berbagai framework atau pustaka antarmuka (UI library) yang mendukung aksesibilitas.

Apa pun teknologi yang digunakan, prinsipnya tetap sama:

1. fokus masuk ke dialog ketika dialog dibuka;
2. fokus tidak keluar dari dialog selama dialog aktif;
3. fokus kembali ke elemen sebelumnya ketika dialog ditutup.

Hal yang Perlu Diperhatikan pada Dialog

Selain Focus Trap, dialog yang aksesibel umumnya juga memiliki karakteristik berikut.

1. Fokus berpindah ke dialog ketika dialog dibuka.
2. Dialog memiliki judul yang jelas.
3. Dialog dapat ditutup menggunakan tombol yang tersedia.
4. Tombol Esc dapat digunakan untuk menutup dialog apabila sesuai dengan fungsi dialog tersebut.
5. Fokus kembali ke tombol atau elemen yang membuka dialog setelah dialog ditutup.

Kesalahan yang Sering Terjadi

Praktik Cepat: Menguji Dialog dan Sidebar

Dialog (modal), sidebar, maupun menu yang muncul di atas halaman harus tetap nyaman digunakan menggunakan keyboard.

Langkah-langkah

1. Buka halaman yang memiliki dialog, popup, atau sidebar.
2. Aktifkan dialog tersebut.
3. Tekan tombol Tab beberapa kali.
4. Tekan Shift + Tab untuk berpindah ke arah sebaliknya.

Perhatikan beberapa hal berikut.

1. Apakah fokus selalu berada di dalam dialog?
2. Apakah fokus tidak berpindah ke halaman di belakang?
3. Apakah seluruh tombol di dalam dialog dapat dijangkau?
4. Apakah dialog dapat ditutup menggunakan tombol yang tersedia atau tombol Esc (jika memang didukung)?
5. Setelah dialog ditutup, apakah fokus kembali ke tombol yang membuka dialog?

Jika salah satu jawaban di atas adalah tidak, kemungkinan pengelolaan fokus pada dialog masih perlu diperbaiki.

Navigasi menggunakan keyboard tidak hanya bergantung pada indikator fokus yang terlihat, tetapi juga pada cara website mengelola perpindahan fokus.

Skip Link membantu pengguna melewati blok navigasi yang berulang sehingga mereka dapat langsung menuju konten utama.

Sementara itu, Focus Trap memastikan fokus keyboard tetap berada di dalam dialog selama dialog aktif dan kembali ke elemen yang tepat setelah dialog ditutup.

Dengan menerapkan kedua teknik ini, pengalaman pengguna keyboard dan teknologi bantu akan menjadi jauh lebih efisien, konsisten, dan sesuai dengan prinsip-prinsip WCAG.