Az ARIA-attribútumok (role, aria-label, aria-expanded) megmondják a képernyőolvasónak, mi egy elem és milyen állapotban van.
Az ARIA, teljes nevén WAI-ARIA (Accessible Rich Internet Applications), a W3C szabványa, amely HTML-attribútumokkal egészíti ki az oldal szemantikáját. Azt írja le a kisegítő technológiák (például a képernyőolvasók) számára, hogy egy elem mi (role), mi a neve (aria-label, aria-labelledby), és milyen állapotban van (aria-expanded, aria-checked, aria-hidden).
Mire jó, hol találkozol vele
Az ARIA akkor kell, amikor egy felületi elemnek nincs megfelelő natív HTML-megfelelője, vagy egyedi komponenst építesz: lenyíló menüt, fülsort, modális ablakot, dinamikusan frissülő értesítést. Ilyenkor a vizuális megjelenés önmagában nem mondja meg a képernyőolvasónak, mi történik.
Az ARIA használatának első szabálya mégis az, hogy ha létezik natív HTML-elem a feladatra (<button>, <nav>, <label>), azt használd helyette. A natív elemek beépítetten kezelik a billentyűzetet és a szerepet, az ARIA viszont csak leírja a viselkedést, de nem valósítja meg. A rosszul alkalmazott ARIA ezért rontani is tud a helyzeten: egy gombnak jelölt div attól még nem fog Enterre reagálni.
Bővebben: WCAG és webes akadálymentesítés