ARIA (Accessible Rich Internet Applications) je skup atributa koji dodaje semantiku dostupnosti — uloge, stanja i svojstva — koje izvorni HTML ne može izraziti. Ali najvažnije ARIA pravilo je: prvo dadajte prednost izvornom HTML-u.
Save
Save
Izvorni elementi dolaze sa ispravnim ulogama, ponašanjem tipkovnice i fokusom besplatno. Dosegnite ARIA samo kada nijedan izvorni element ne obavlja posao.
<!-- 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 -->
Ovo je odista korisna ARIA: informiranje čitača zaslona o sadržaju koji se mijenja bez ponovnog učitavanja stranice (rezultati pretraživanja, toast obavijesti, greške valjanog).
Neispravna ARIA je gora od nikakve — daje korisnicima čitača zaslona lažne informacije. A ARIA mijenja samo semantiku, nikad ponašanje: role="button" na <div> ne čini ga fokusom niti klikom; morate sami dodati tabindex i rukovatelje tipki.
Koristite semantički HTML za slučaj od 95%; koristite ARIA za popunjavanje praznina za prilagođene widgete (kartice, comboboxes, jelovnici) i objavite dinamičke ažuriranja putem live regija.
Slijedite pravila — dadajte prednost izvornom, ne mijenjajte izvornu semantiku nepotrebno, održavajte stanja sinkronizirana i nikada ne primjenjujte ulogu koju ne implementirate u potpunosti.