ARIA (Accessible Rich Internet Applications) este un set de atribute care adaugă semantica accesibilității — roluri, stări și proprietăți — pe care HTML-ul nativ nu le poate exprima. Dar cea mai importantă regulă ARIA este: preferă mai întâi HTML-ul nativ.
Save
Save
Elementele native vin cu roluri corecte, comportament de tastatură și focus gratuit. Apelează la ARIA doar atunci când niciun element nativ nu rezolvă problema.
<!-- 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 -->
Acesta este într-adevăr ARIA util: informarea cititorilor de ecran despre conținut care se schimbă fără a reîncărca pagina (rezultate de căutare, notificări, erori de validare).
ARIA incorect este mai rău decât niciunul — dă utilizatorilor cititori de ecran informații false. Și ARIA schimbă doar semantica, niciodată comportamentul: role="button" pe un <div> nu-l face focusable sau clickable; trebuie să adaugi tabindex și manageri de taste singur.
Foloseşte HTML semantic pentru cazul de 95%; utilizează ARIA pentru a umple golurile pentru widgeturi personalizate (file, casete combo, meniuri) și pentru a anunța actualizări dinamice prin live regions.
Urmează regulile — preferă nativul, nu schimba semantica nativă fără motiv, menține stările sincronizate și nu aplica niciodată un rol pe care nu-l implementezi pe deplin.