aria-expanded on toggles: Crawl Audit check 176

Short answer: when a button opens or closes something, like a mobile menu or an FAQ answer, sighted visitors see the change. Screen reader users only know if the button says so, and aria-expanded is how it says "open" or "closed". Check 176 warns when the page seems to have toggles without it.

What Crawl Audit checks

• Pass: any element on the page uses aria-expanded.
• Warning: none does, but the page has elements whose class suggests an accordion, dropdown, collapse or menu toggle, or a <details> element.
• Pass: neither.

One correct toggle passes the whole page, so check each one. And <details> needs no aria-expanded: browsers announce its state on their own.

What the sources say

• W3C's disclosure pattern: "When the content is visible, the element with role button has aria-expanded set to true." "When the content area is hidden, it is set to false."
• MDN: the attribute indicates "if a control is expanded or collapsed". And: "Avoid including it on elements that do not control the expanded state of other elements."

Getting it right

• Put it on the button that does the toggling, not on the panel.
• Update it in your script every time the state changes.
• Use a real <button>, so it works with the keyboard too.

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

On devmarde.com

Our homepage had 5 elements with aria-expanded on 6 October. It passes.

Sources

• W3C ARIA Authoring Practices, Disclosure (show/hide) pattern.
• MDN, aria-expanded (updated 12 September 2026), checked 6 October 2026.