Web Accessibility (a11y) memastikan website bisa digunakan oleh semua orang, termasuk penyandang disabilitas. Ini bukan fitur tambahan — ini adalah tanggung jawab setiap developer.

Siapa yang terbantu:

• Tunanetra — menggunakan screen reader (NVDA, VoiceOver, JAWS)
• Low vision — membutuhkan zoom, kontras tinggi
• Tuna rungu — membutuhkan caption/subtitle
• Motorik terbatas — navigasi keyboard only, switch device
• Kognitif — membutuhkan layout sederhana, instruksi jelas
• Situasional — satu tangan membawa bayi, layar di bawah sinar matahari

Semantic HTML — fondasi a11y:

<!-- ❌ Buruk -->
<div class="nav">
  <div class="btn" onclick="go()">Menu</div>
</div>

<!-- ✅ Baik -->
<nav aria-label="Main navigation">
  <button onclick="go()">Menu</button>
</nav>

Gunakan elemen HTML yang tepat: <button> untuk aksi, <a> untuk navigasi, <h1>-<h6> untuk heading hierarchy, <main>, <nav>, <aside> untuk landmarks.

ARIA (Accessible Rich Internet Applications): ARIA menambahkan informasi aksesibilitas ke elemen HTML saat semantic HTML tidak cukup:

<!-- Roles -->
<div role="alert">Data berhasil disimpan!</div>
<div role="dialog" aria-labelledby="title">...</div>

<!-- States -->
<button aria-expanded="false" aria-controls="menu">Toggle Menu</button>
<div id="menu" aria-hidden="true">...</div>

<!-- Properties -->
<input aria-label="Cari pelajaran" type="search">
<div aria-live="polite">Loading...</div>

Aturan ARIA:

1. Jangan pakai ARIA jika HTML biasa sudah cukup
2. Jangan ubah semantik native (<button role="heading"> ← salah!)
3. Semua elemen interaktif harus bisa dioperasikan keyboard

Keyboard navigation:

• Semua elemen interaktif harus bisa di-focus dengan Tab
• Enter/Space untuk mengaktifkan
• Escape untuk menutup dialog/dropdown
• Arrow keys untuk navigasi dalam komponen

// Custom keyboard handler:
element.addEventListener("keydown", (e) => {
  if (e.key === "Escape") closeModal();
  if (e.key === "ArrowDown") focusNextItem();
  if (e.key === "ArrowUp") focusPrevItem();
});

Kontras warna: WCAG 2.1 mensyaratkan rasio kontras minimum:

• AA — 4.5:1 untuk teks normal, 3:1 untuk teks besar
• AAA — 7:1 untuk teks normal, 4.5:1 untuk teks besar

Checklist a11y:

• Semua gambar punya alt text yang deskriptif
• Heading berurutan (h1 → h2 → h3, jangan skip)
• Formulir punya <label> yang terhubung ke input
• Fokus terlihat jelas (jangan hilangkan outline tanpa pengganti)
• Konten bisa diakses tanpa mouse
• Video punya caption, audio punya transkrip
• Halaman bisa digunakan saat dizoom 200%

Tools pengujian: axe DevTools, Lighthouse Accessibility audit, screen reader testing.