Az ARIA (Accessible Rich Internet Applications) egy attribútumok halmaza, amely hozzáadja az akadálymentesítés szemantikáját — szerepeket, állapotokat és tulajdonságokat — amelyeket a natív HTML nem tud kifejezni. De az ARIA legfontosabb szabálya: előbb a natív HTML-t részesítsd előnyben.
Save
Save
A natív elemek helyes szerepekkel, billentyűzetkezelési viselkedéssel és fókusszal járnak ingyen. Az ARIA-hoz csak akkor fordulj, ha egyetlen natív elem sem végzi el a feladatot.
<!-- 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 -->
Ez valóban hasznos ARIA: a képernyőolvasókat arról tájékoztatja, hogy az oldal újbetöltése nélkül megváltozó tartalmakról (keresési eredmények, toast értesítések, validációs hibák).
A helytelen ARIA rosszabb, mint semmi — félrevezető információt ad a képernyőolvasó felhasználóinak. Az ARIA pedig csak a szemantikát változtatja meg, soha a viselkedést: az <div> elemre helyeztetett role="button" nem teszi fókuszálhatóvá vagy kattinthatóvá; magad hozzá kell adnod a tabindex és a billentyűkezelőket.
Használj szemantikus HTML-t a 95%-os esetre; az ARIA-t egyéni vezérlőelemek (tabs, comboboxes, menus) réseit kitöltésére és élő régiók révén dinamikus frissítések bejelentésére.
Betartsd a szabályokat — részesítsd előnyben a natívat, ne változtass szükségtelenül a natív szemantikán, tartsd szinkronban az állapotokat, és soha ne alkalmaz olyan szerepet, amely nincsen teljesen megvalósítva.