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

Next lesson: Grid and tree

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies