Pentingnya Accessibility (a11y) di Web Modern

Pentingnya Accessibility (a11y) di Web Modern

Accessibility atau a11y adalah praktik memastikan bahwa website dapat digunakan oleh SEMUA orang — termasuk mereka yang memiliki disabilitas visual, pendengaran, motorik, atau kognitif.

Skala Dampak

+------------------------------------------------+
|  Jenis Disabilitas      |  % Populasi Global   |
+------------------------------------------------+
|  Gangguan Penglihatan   |  15% (1.1 miliar)    |
|  Gangguan Pendengaran   |  5% (430 juta)       |
|  Gangguan Motorik       |  3.8% (300 juta)     |
|  Gangguan Kognitif      |  10-15%              |
+------------------------------------------------+

1. HTML Semantik — Fondasi a11y

Jangan gunakan <div> untuk tombol! Gunakan elemen sesuai fungsinya:

<!-- BURUK: Screen reader tidak tahu ini tombol -->
<div class="btn" onclick="handleClick()">Klik saya</div>

<!-- BAIK: Screen reader akan baca sebagai tombol -->
<button class="btn" onclick="handleClick()">Klik saya</button>

<!-- Struktur halaman yang benar -->
<header>
  <nav aria-label="Navigasi utama">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/blog">Blog</a></li>
    </ul>
  </nav>
</header>

<main>
  <h1>Judul Halaman</h1>
  <!-- konten utama -->
</main>

<footer>
  <p>&copy; 2026</p>
</footer>

2. Alt Text pada Gambar

<!-- Informatif: deskripsikan isi gambar -->
<img src="diagram-arsitektur.png"
     alt="Diagram arsitektur Next.js: Client -> Server -> Database">

<!-- Dekoratif: biarkan kosong agar dilewati screen reader -->
<img src="background.png" alt="">

3. Keyboard Navigation

Uji aplikasi Anda tanpa mouse! Pastikan:

Tab          → Pindah ke elemen berikutnya
Shift + Tab  → Pindah ke elemen sebelumnya
Enter/Space  → Aktivasi tombol/link
Escape       → Tutup modal/dropdown
Arrow Keys   → Navigasi dalam list/table

4. Kontras Warna

WCAG 2.1 mensyaratkan:

Gunakan alat seperti:

• WebAIM Contrast Checker
• Chrome DevTools -> Rendering -> Enable a11y tree

5. ARIA Labels

Gunakan ARIA ketika HTML semantik tidak mencukupi:

<button aria-label="Tutup modal" onclick="closeModal()">
  X
</button>

<div role="alert" aria-live="polite">
  Data berhasil disimpan!
</div>

Checklist Audit a11y

• Jalankan Lighthouse Audit (target score a11y > 90)
• Uji dengan keyboard only
• Gunakan screen reader (NVDA/JAWS/VoiceOver)
• Periksa kontras warna
• Pastikan focus indicator terlihat
• Label form terasosiasi dengan input

---

Kesimpulan: Accessibility bukan fitur opsional. Web yang aksesibel adalah web yang lebih baik untuk semua orang — dan ini adalah tanggung jawab kita sebagai developer.