Coba bayangin website kamu cuma bisa diakses orang yang bisa liat layar, denger suara, dan punya tangan lengkap. Kamu otomatis nge-block puluhan juta orang Indonesia yang tunanetra, tunarungu, atau punya disabilitas motorik. Aksesibilitas web (a11y) bukan opsional fitur premium — itu kewajiban etis + bisnis. Web yang accessible = lebih banyak user yang bisa pake produk kamu, plus skor SEO Google lebih tinggi (Google reward halaman yang accessible).

💡 Aturan emas ARIA. "First rule of ARIA: don't use ARIA." Maksudnya: pake elemen HTML semantik native dulu (<button>, <nav>, <input>). ARIA cuma sebagai tambalan kalau native gak cukup. Banyak developer overthink ARIA padahal masalahnya cukup pake <button> bukan <div onclick>.

3 Prinsip Dasar A11y HTML

1. Gunakan elemen semantik — <nav>, <main>, <button> lebih baik daripada <div> untuk semua hal
2. Selalu isi atribut alt pada gambar — screen reader membacakan teks alt
3. Hubungkan <label> dengan <input> — penting untuk form

ARIA (Accessible Rich Internet Applications)

ARIA adalah atribut tambahan untuk meningkatkan aksesibilitas saat elemen HTML standar tidak cukup:

<div role="alert">Terjadi kesalahan!</div>
<button aria-label="Tutup menu">✕</button>
<div aria-hidden="true">Dekorasi</div>

Atribut ARIA yang Umum

• role — mendefinisikan peran elemen (alert, dialog, navigation)
• aria-label — memberi label yang dibaca screen reader
• aria-hidden — menyembunyikan elemen dari screen reader
• aria-required — menandai input wajib
• aria-expanded — menandai status buka/tutup dropdown

Aturan penting: gunakan elemen HTML yang tepat terlebih dahulu, baru gunakan ARIA jika benar-benar diperlukan. Sebuah <button> asli selalu lebih baik daripada <div role="button">.

🎭 Analogi sehari-hari

A11y = ramp + lift di gedung publik. Bukan "extra" yang di-add belakangan — harus didesain sejak awal. Native HTML (<button>, <a>, <input>) = pintu standar yang sudah accessible. ARIA = sticker tambahan untuk pintu non-standar — dipakai cuma saat native tidak cukup. Aturan emas: first rule of ARIA is don't use ARIA.

⚠️ Jebakan yang sering ditemui

• <div onclick="..."> bukan tombol — tidak bisa di-tab, tidak respon Enter/Space, tidak diumumkan screen reader. Pakai <button>.
• aria-label di elemen non-interaktif — <div aria-label="..."> sering diabaikan screen reader. ARIA bekerja paling baik di elemen interaktif/landmark.
• role="button" tanpa tabindex="0" — elemen tidak fokusable lewat keyboard. Dan masih harus tambahkan handler Enter/Space sendiri.
• aria-hidden="true" di elemen fokusable — elemen tetap bisa di-tab, tapi screen reader skip. Kombinasi membingungkan. Kalau tersembunyi, sembunyikan total.
• Decorative icon punya alt="" — icon dekoratif harus alt="" (kosong, bukan dihapus) atau aria-hidden="true". Kalau ada alt="icon centang" screen reader bacakan kata "icon".

TL;DR: A11y = bikin website bisa diakses semua user (tunanetra, tunarungu, motorik). Pakai elemen HTML semantik native dulu (<button>, <nav>, <input>) — ARIA cuma tambalan kalau native gak cukup ("first rule of ARIA: don't use ARIA"). Wajib: alt di image, <label> connect ke <input>, focusable elements bisa di-tab. Bonus: skor SEO Google naik. Audit pakai Lighthouse di Chrome DevTools.