HTML: aria-expanded

The aria-expanded attribute tells assistive technology whether an expandable control is currently open or closed.

Minimal example

<button type="button" aria-controls="menu" aria-expanded="false">
  Menu
</button>
<nav id="menu" hidden>Navigation links</nav>

When the menu opens, update the button to aria-expanded="true" and make the menu visible. When it closes, set it back to false and hide the menu.

Keep the state synchronized

button.addEventListener('click', () => {
  const open = button.getAttribute('aria-expanded') === 'true';
  button.setAttribute('aria-expanded', String(!open));
  menu.hidden = open;
});

The attribute describes the current state; it does not open or close the content by itself. Your interaction code must update both the visual state and the ARIA state.

Common mistakes

• Do not leave aria-expanded unchanged after the UI opens or closes.
• Use the boolean values as strings: "true" or "false".
• Only add the attribute when the control actually expands or collapses another region.