Accessibility (a11y) — Web untuk Semua Orang

Accessibility berarti membuat website bisa digunakan oleh semua orang, termasuk orang dengan disabilitas — visual, motorik, auditori, atau kognitif.

Mengapa Penting?

1. 15% populasi dunia memiliki beberapa bentuk disabilitas
2. Legal — banyak negara mewajibkan website accessible
3. SEO — semantic HTML yang baik juga bagus untuk search engine
4. UX untuk semua — accessibility improvements sering membuat UX lebih baik untuk semua orang (misalnya: caption video berguna di tempat ramai)

Semantic HTML — Fondasi A11y

Gunakan elemen HTML yang tepat, bukan div untuk semua:

<!-- ❌ Buruk -->
<div class="button" onclick="submit()">Kirim</div>

<!-- ✅ Baik -->
<button type="submit">Kirim</button>

Elemen semantic memberi informasi ke screen reader:

• <nav> → "navigasi"
• <main> → "konten utama"
• <button> → "tombol"
• <h1> → "heading level 1"

Alt Text untuk Gambar

<!-- Gambar informatif — deskripsi yang berguna -->
<img src="chart.png" alt="Grafik pertumbuhan pendapatan 2024, naik 45% dari Q1 ke Q4" />

<!-- Gambar dekoratif — alt kosong -->
<img src="decorative-line.svg" alt="" />

ARIA — Accessible Rich Internet Applications

ARIA menambahkan informasi accessibility saat HTML semantic tidak cukup:

<!-- Role -->
<div role="alert">Pesan error penting</div>

<!-- Label -->
<button aria-label="Tutup dialog">✕</button>

<!-- State -->
<button aria-expanded="false">Menu</button>

<!-- Relationship -->
<input aria-describedby="help-text" />
<span id="help-text">Minimal 8 karakter</span>

Checklist Dasar

1. Semua gambar punya alt text (atau alt="" jika dekoratif)
2. Heading berurutan (h1 → h2 → h3, jangan skip)
3. Warna bukan satu-satunya cara menyampaikan info
4. Kontras warna memenuhi WCAG AA (4.5:1)
5. Semua fungsi bisa diakses dengan keyboard

Apple dan Google sangat serius dengan accessibility — kedua platform mereka punya extensive accessibility features dan guidelines.