aria-expanded
aria-expanded tells assistive technology whether the region a control opens is currently expanded or collapsed. The attribute belongs on the focusable control, usually the button. The region that opens and closes does not carry it. It has three states: true for expanded, false for collapsed, and the default undefined, where the attribute is simply absent. Per MDN the default does not mean collapsed. It means this element does not own or control an expandable grouping element at all. Roles that support aria-expanded include button, combobox, link, menuitem, tab and treeitem. For the disclosure pattern, the ARIA Authoring Practices Guide (APG) additionally offers aria-controls as an optional attribute on the same button. It refers to the element that contains the content being shown or hidden. Note what the attribute does and what it does not: it describes a state, it does not create one. Showing and hiding remains the job of your code. MDN also names the reverse case: an element that controls no such region should not carry the attribute at all.
In practice
Typical places are the menu in a mobile header, an FAQ list that opens on click, a filter block, and a “Show more” button. The most common mistake is not in the markup but in the sequence: aria-expanded="false" is written once into the HTML and never rewritten on click. The menu is then visibly open while it is still announced as collapsed. The usual automated checkers do not catch this. They see an attribute that is present and valid, and they do not test whether its value matches the visible state. The second mistake is placement. The attribute goes on the panel, because the panel is the thing that opens and closes; nobody hears it there, because focus is on the button. For the counter-test, open the developer tools, select the button in the element view, and watch whether the value flips as you open and close the widget. Then listen to the same control with a screen reader. How that state change sounds in any given combination of screen reader and browser is something we have not measured systematically, so we do not claim it.
← Back to the glossary