ARIA (Accessible Rich Internet Applications) minangka sakumpulan atribut sing nambah semantik aksesibilitas — roles, states, lan properties — sing HTML asli ora bisa ngekspresi. Nanging aturan ARIA paling penting yaiku: pilih HTML asli rumiyin.
Save
Save
Elemen asli duwe roles sing bener, tingkahlaku keyboard, lan focus kanthi gratis. Nggunakake ARIA mung nalika ora ana elemen asli sing gawe tugasé.
<!-- 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 -->
Iki ARIA sing bener-bener gundul: ngunekake screen readers babagan konten sing berubah tanpa reload kaca (asil panelusuran, toasts, kesalahan validasi).
ARIA sing salah luwih ala tinimbang ora ana — menehi informasi salah kanggo pangguna screen reader. Lan ARIA mung ngowahi semantik, ora tingkahlaku: role="button" ing <div> ora nggawe bisa fokus utawa bisa diklik; sampeyan kudu nambah tabindex lan key handlers dhewe.
Nggunakake HTML semantik kanggo 95% kasus; gunakake ARIA kanggo isi jurang kanggo widget khusus (tabs, comboboxes, menus) lan kanggo umumake update dinamis liwat live regions.
Ikuti aturan — pilih asli, aja owahi semantik asli tanpa sengaja, tetepake states selaras, lan aja terapake role sing ora sampeyan implementasikake kanthi lengkap.