Aksesibilitas Dasar Web

Aksesibilitas Itu Untuk Siapa?

Aksesibilitas (disingkat a11y) artinya web bisa dipakai semua orang, termasuk pengguna tunanetra (screen reader), pengguna yang cuma bisa pakai keyboard, dan pengguna dengan gangguan penglihatan warna. Ini bukan fitur tambahan: di banyak negara ini kewajiban hukum, dan secara teknis ini bikin web-mu lebih baik untuk semua orang.

Kabar baiknya: sebagian besar aksesibilitas sudah kamu pelajari tanpa sadar, karena HTML yang semantik itu sudah aksesibel secara bawaan.

Fondasi yang Sudah Kamu Punya

Cek ulang modul-modul sebelumnya, ini semua adalah aksesibilitas:

• <h1> sampai <h6> berurutan: screen reader pakai ini untuk navigasi.
• alt pada gambar: pengganti visual untuk yang tidak bisa melihat.
• <label> terhubung ke input: screen reader membacakan labelnya.
• <nav>, <main>, <footer>: landmark yang bisa dilompati.
• Kontras teks cukup: terbaca pengguna low-vision.

Jadi kalau HTML-mu semantik dari awal, kamu sudah menyelesaikan 80% pekerjaan aksesibilitas.

Navigasi Keyboard

Tidak semua orang pakai mouse. Pastikan semua yang bisa diklik juga bisa dijangkau dengan tombol Tab dan diaktifkan dengan Enter:

• Link (<a href>) dan button bisa di-Tab secara bawaan. Jangan ganti dengan <div onclick>.
• Urutan Tab mengikuti urutan di kode HTML. Jangan bikin urutan visual beda dari urutan kode.
• Tambahkan indikator fokus yang jelas (jangan hilangkan outline tanpa pengganti).

Catatan teknis: Atribut tabindex="0" bisa bikin elemen non-interaktif masuk urutan Tab, tapi jarang dibutuhkan kalau kamu pakai tag yang benar. Hindari tabindex positif (misalnya tabindex="1") karena mengacaukan urutan alami dan bikin pengalaman keyboard tidak terduga.

Skip Link

Pengguna keyboard tidak mau menekan Tab 30 kali melewati navigasi setiap pindah halaman. Sediakan link "lompat ke konten":

<body>
  <a href="#konten">Lewati ke konten utama</a>
  <header>
    <nav><!-- banyak link navigasi --></nav>
  </header>
  <main id="konten">
    <!-- isi utama -->
  </main>
</body>

Link ini bisa disembunyikan secara visual lalu dimunculkan saat fokus (dengan CSS), pola standar yang dipakai situs-situs besar.

ARIA: Bumbu, Bukan Pengganti

ARIA (Accessible Rich Internet Applications) adalah atribut tambahan untuk kasus yang tidak terwakili tag HTML bawaan:

<button aria-label="Tutup dialog">X</button>
<div role="alert">Pesan berhasil terkirim!</div>

• aria-label: nama aksesibel saat teks terlihat tidak cukup jelas (tombol cuma berisi "X").
• role="alert": memberi tahu screen reader untuk langsung mengumumkan perubahan penting.

Aturan pertama ARIA: jangan pakai ARIA kalau tag HTML bawaan sudah cukup. <button> selalu lebih baik daripada <div role="button">, karena button bawaan sudah punya perilaku keyboard dan fokus gratis.

Bahasa dan Judul Halaman

Dua hal sepele yang sering dilupakan:

<html lang="id">
<title>Judul yang menjelaskan isi halaman</title>

lang yang benar bikin screen reader memakai pelafalan bahasa yang tepat. Bayangkan teks Indonesia dibaca dengan logat Inggris, tidak nyaman.

Checklist Aksesibilitas

• Semua gambar informatif punya alt yang bermakna
• Semua input punya <label>
• Heading berurutan, tidak loncat level
• Semua fungsi bisa diakses pakai keyboard
• Ada skip link kalau navigasi panjang
• lang dan <title> terisi benar
• ARIA hanya untuk yang tidak terwakili tag bawaan

Aksesibilitas bukan checklist sekali jalan, tapi kebiasaan. Mulai dari HTML yang semantik, dan kamu sudah jauh di depan mayoritas website.