ARIA Basics
ARIA (Accessible Rich Internet Applications) provides additional semantics when native HTML cannot adequately represent a custom interface. Common attributes include aria-label, aria-labelledby, aria-describedby, aria-expanded, and aria-hidden.
ARIA Does Not Add Behavior
ARIA communicates semantics and state. JavaScript must still implement the actual interaction behavior.
ARIA Expanded State
<button aria-expanded="false" aria-controls="menu">Menu</button>\n<nav id="menu" hidden>\n <a href="/docs">Docs</a>\n</nav>💡 aria-expanded communicates the state of a collapsible control and aria-controls identifies the controlled region.
Key Takeaways
- ARIA supplements HTML semantics rather than replacing them.
- ARIA attributes do not automatically implement functionality.
Knowledge Check
Does aria-expanded automatically open and close a menu?