ARIA (Accessible Rich Internet Applications) adalah kumpulan atribut yang menambahkan semantik aksesibilitas — peran, status, dan properti — yang tidak dapat diekspresikan HTML asli. Tetapi aturan ARIA paling penting adalah: lebih suka HTML asli terlebih dahulu.
Save
Save
Elemen asli dilengkapi dengan peran yang benar, perilaku keyboard, dan fokus secara gratis. Gunakan ARIA hanya ketika tidak ada elemen asli yang cocok.
<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->
Ini adalah ARIA yang benar-benar berguna: memberi tahu pembaca layar tentang konten yang berubah tanpa memuat ulang halaman (hasil pencarian, toast, kesalahan validasi).
ARIA yang salah adalah lebih buruk daripada tidak sama sekali — memberikan informasi palsu kepada pengguna pembaca layar. Dan ARIA hanya mengubah semantik, bukan perilaku: role="button" pada <div> tidak membuatnya dapat difokus atau dapat diklik; Anda harus menambahkan tabindex dan pengendali kunci sendiri.
Gunakan HTML semantik untuk kasus 95%; gunakan ARIA untuk mengisi celah untuk widget khusus (tab, combobox, menu) dan untuk mengumumkan pembaruan dinamis melalui wilayah aktif.
Ikuti aturannya — lebih suka asli, jangan ubah semantik asli tanpa perlu, simpan status tetap sinkron, dan jangan pernah terapkan peran yang tidak sepenuhnya Anda implementasikan.