ARIA
Acronymaria attributes, aria-*Definition
Accessible Rich Internet Applications — the everyday name for the role and aria-* attributes that tell assistive technology what an element is, what state it is in and what it is called
Shorthand for WAI-ARIA, the W3C specification that defines them. Roles say what a thing is (role="tablist"), states say how it is right now (aria-expanded, aria-selected) and properties name or relate it (aria-label, aria-describedby). None of them adds behavior.
What people mean when they say "add some ARIA": the attributes, rather than the specification behind them, which is WAI-ARIA.
Three kinds of attribute
- Roles say what an element is:
role="dialog",role="tab",role="region". A native element already has one — a<button>is a button — so a role belongs on markup that HTML has no element for. - States say how it is right now, and change as the user acts:
aria-expanded,aria-selected,aria-checked,aria-disabled. - Properties name it or relate it to something else, and mostly stay
put:
aria-label,aria-labelledby,aria-describedby,aria-controls.
In this site
A glossary term's hover definition is an example: the tooltip becomes the
link's aria-describedby, so a screen reader announces the definition
when the link takes focus. The attribute comes from Reka UI, under Nuxt UI,
not from hand-written markup — which is where most of the ARIA here comes
from.