Coba Pakai Website Kamu Cuma Pakai Keyboard. Berani?

Accessibility sering baru dipikirin di akhir project, jadi audit atau daftar perbaikan. Dari pengalamanku, hasilnya jauh lebih bagus kalau accessibility jadi kebiasaan dari awal build. Kebanyakan kerjaannya nggak ribet kok. Intinya: pakai platform sesuai cara dia dirancang.

Mulai dari semantic HTML

Elemen native udah ngasih keyboard support, focus handling, dan pengumuman buat screen reader secara gratis. Sebuah button bisa di-focus, nerima Enter dan Space, dan diumumin sebagai button. Sebuah div dengan click handler nggak punya semua itu, sampai kamu bikin ulang sendiri secara manual.

• Pakai button buat aksi dan a buat navigasi.

• Tiap halaman punya satu h1, dan urutan heading tetap rapi.

• Bungkus area halaman pakai header, nav, main, dan footer biar assistive tech bisa pindah antar bagian.

Bikin jalur keyboard-nya jelas

Coba pakai interface kamu cuma dengan tombol Tab. Biasanya langsung ketahuan jebakan tersembunyinya: menu yang nggak bisa ditutup, modal yang ngebiarin focus keluar, atau custom dropdown yang nggak pernah kebagian focus.

• Pertahankan style :focus-visible yang kelihatan. Jangan hapus outline kalau belum ada gantinya.

• Tutup overlay pakai Escape, terus balikin focus ke elemen yang tadi membukanya.

• Tambahin link "Skip to content" sebagai elemen pertama yang bisa di-focus.

Pakai ARIA buat menjelaskan, bukan buat nambal

ARIA memang powerful, tapi dia cuma ngubah apa yang diumumin assistive tech. Dia nggak nambah behavior. Pakai ARIA pas HTML native nggak bisa nyampein state-nya, misalnya aria-expanded di toggle menu atau aria-current di link halaman yang lagi aktif.

Kalau elemen native bisa, pakai elemen native. ARIA itu buat menjelaskan state yang nggak bisa disampein HTML.

Hargai preferensi motion dan media

Animasi bikin interface terasa hidup, tapi jangan sampai jadi syarat buat ngerti kontennya. Cek prefers-reduced-motion dan sediain versi yang lebih kalem. Kasih alt text yang bermakna buat gambar, atau kosongin kalau gambarnya cuma hiasan.

Masukin ke definition of done

Pengecekan yang awet itu yang udah nyatu sama workflow:

• Tes keyboard-only sebelum setiap merge.

• Cek Lighthouse atau axe di halaman-halaman utama.

• Pakai konten asli, termasuk nama yang panjang dan terjemahan, di setiap design review.

Interface yang accessible lebih gampang dipakai semua orang. Dia juga lebih gampang di-maintain, karena strukturnya jujur soal fungsi tiap elemen.