Accessibility

ARIA (Accessible Rich Internet Applications) adalah sekumpulan atribut HTML untuk meningkatkan aksesibilitas elemen yang tidak cukup dengan HTML semantik saja.

Aturan Emas ARIA

"No ARIA is better than bad ARIA."

Gunakan ARIA hanya ketika HTML semantik tidak cukup.

Atribut ARIA Umum

aria-label

Memberi nama pada elemen yang tidak punya teks visible:

<button aria-label="Tutup dialog">
  <svg>...</svg>
</button>

aria-labelledby

Menghubungkan elemen dengan teks label yang sudah ada:

<h2 id="judul-modal">Konfirmasi Hapus</h2>
<div role="dialog" aria-labelledby="judul-modal">
  Apakah Anda yakin ingin menghapus?
</div>

aria-describedby

Menambahkan deskripsi tambahan:

<input aria-describedby="bantuan-email" />
<div id="bantuan-email">Gunakan format nama@perusahaan.com</div>

aria-hidden

Menyembunyikan elemen dari screen reader:

<!-- Ikon dekoratif -->
<svg aria-hidden="true">...</svg>

<!-- Konten duplikat -->
<div aria-hidden="true">Versi visual dari grafik</div>

aria-expanded

Menunjukkan state expandable:

<button aria-expanded="false" aria-controls="menu-1">
  Menu
</button>
<div id="menu-1" hidden>...</div>

aria-live

Mengumumkan perubahan dinamis:

<!-- polite: mengumumkan setelah pengguna selesai beraktivitas -->
<div aria-live="polite" id="notifikasi">0 pesan baru</div>

<!-- assertive: mengumumkan segera, interupsi -->
<div aria-live="assertive" role="alert">Form gagal dikirim</div>

ARIA Roles

Role	Gunakan Ketika
`role="alert"`	Pesan error atau peringatan
`role="dialog"`	Modal atau popup
`role="navigation"`	Navigasi tanpa `<nav>`
`role="main"`	Konten utama tanpa `<main>`
`role="tablist"`	Tab interface
`role="tab"`	Tab individual
`role="tabpanel"`	Panel konten tab
`role="progressbar"`	Progress indicator
`role="status"`	Update non-urgent

Contoh: Accessible Tabs

<div role="tablist" aria-label="Dokumentasi">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
    Panduan
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">
    API
  </button>
</div>

<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  Konten panduan...
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
  Konten API...
</div>

Accessibility - ARIA