ARIA (Accessible Rich Internet Applications) je nabor atributov, ki dodajajo dostopnostno semantiko — vloge, stanja in lastnosti — ki jih nativni HTML ne more izraziti. Vendar je najpomembnejše ARIA pravilo: prednostno uporabi nativni HTML.
Save
Save
Nativni elementi imajo pravilne vloge, vedenje tipkovnice in fokus brezplačno. K ARIA se zateci le, kadar nobeden nativni element ne naredi opravila.
<!-- 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 -->
To je res uporabna ARIA: obveščanje bralnikov zaslona o vsebini, ki se spremeni brez ponovnega nalaganja strani (rezultati iskanja, obvestila, napake validacije).
Nepravilna ARIA je slabša od nobene — daje uporabnikom bralnikov zaslona lažne informacije. In ARIA spremeni le semantiko, nikoli vedenja: role="button" na <div> ga ne naredi fokusabilnega ali klikljivega; sam moraš dodati tabindex in ročnike tipk.
Uporabi semantični HTML za 95 % primerov; uporabi ARIA za zapolnitev vrzeli za Custom gradnike (zavihki, kombinirana polja, menije) in za obveščanje dinamičnih posodobitev prek živih regij.
Upoštevaj pravila — prednostno nativno, ne spreminjaj nativne semantike nepotrebno, drži stanja v sinkrionizaciji in nikoli ne uporabi vloge, ki je ne implementiraš v celoti.
Knjižnica IT vprašanj za razgovore s podrobnimi odgovori — od začetnika do izkušenega.
Doniraj