ARIA (Accessible Rich Internet Applications)

ARIA menambahkan semantik ke elemen HTML agar screen reader bisa memahami UI yang kompleks. Tapi ingat: HTML semantik selalu lebih baik dari ARIA.

Aturan ARIA

1. Jangan pakai ARIA jika HTML native bisa — <button> lebih baik dari <div role="button">
2. Jangan ubah semantik native — Jangan <h2 role="tab">
3. Semua ARIA control harus keyboard accessible

Roles

<!-- Landmark roles -->
<nav role="navigation">...</nav>  <!-- redundant, <nav> sudah cukup -->
<div role="search">...</div>     <!-- berguna, tidak ada HTML element -->

<!-- Widget roles -->
<div role="tablist">
  <button role="tab" aria-selected="true">Tab 1</button>
  <button role="tab" aria-selected="false">Tab 2</button>
</div>
<div role="tabpanel">Konten tab 1</div>

<!-- Alert (live region) -->
<div role="alert">Form berhasil disimpan!</div>

States & Properties

<!-- aria-expanded: accordion, dropdown -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>...</ul>

<!-- aria-live: dynamic content -->
<div aria-live="polite">3 pesan baru</div>

<!-- aria-describedby: extra context -->
<input aria-describedby="password-hint" />
<p id="password-hint">Minimal 8 karakter</p>

<!-- aria-invalid: form validation -->
<input aria-invalid="true" aria-errormessage="email-error" />
<p id="email-error">Email tidak valid</p>

Common Patterns

• Modal dialog — role="dialog", aria-modal="true", focus trap
• Combobox — role="combobox", aria-autocomplete, aria-activedescendant
• Toast/notification — role="status" atau aria-live="polite"