States and properties
Use aria-* states and properties correctly.
State or property?
ARIA attributes fall into two categories. A state describes the element's current condition and changes often: aria-expanded, aria-hidden, aria-busy. A property is more stable: aria-label, aria-labelledby, aria-roledescription.
The split is in meaning, not spelling. A menu carries aria-expanded="true" when open and "false" when closed; that value flips each time the user clicks. An aria-label, by contrast, is written once and rarely updated.
aria-expanded for a toggle
When a dropdown menu, accordion or detail box opens and closes, aria-expanded updates. Write "true" when open and "false" when closed. A screen reader then announces 'expanded' or 'collapsed'.
In <button aria-expanded="false" aria-controls="menu-1">Open menu</button>, the button controls a closed menu. aria-controls carries the id of the element the button governs, so the two become linked. Using both together completes the relationship.
Prefer native HTML over ARIA
A <button disabled> is already disabled; writing aria-disabled="true" on top is redundant. When native HTML has an attribute, use it; ARIA steps in only when no HTML counterpart exists.
If you build a <div role="button">, the HTML disabled attribute will not work; that is when aria-disabled="true" is needed. Core principle: native HTML first, ARIA second. This keeps code short and avoids mismatch.
Exercise A toggle button and its content
Add a <button> to body; set aria-expanded to false and aria-controls to menu-1. The button text is Open menu. Add a <div> to body with id set to menu-1 and role set to menu. Inside it put an <a href="/settings">Settings</a> link.
Show example solution
<body>
<button aria-expanded="false" aria-controls="menu-1">Open menu</button>
<div id="menu-1" role="menu">
<a href="/settings">Settings</a>
</div>
</body>Test yourself
-
Which is a state?
- aria-expanded
- aria-label
- aria-labelledby
- aria-roledescription
Show answer
aria-expanded — Correct. aria-expanded is a state; it tells whether a toggle is open or closed.
-
Fill in aria-hidden
<span aria-hidden="____">✓</span>Show answer
<span aria-hidden="true">✓</span> -
Match each attribute to its meaning
- aria-expanded="true"
- Toggle open
- aria-expanded="false"
- Toggle closed
- aria-hidden="true"
- Decorative hidden
- aria-disabled="true"
- Item disabled