Start scanning free

( Robust / WCAG 4.1.2 )

Expandable control is missing aria-expanded

This check maps to Name, Role, Value. Use the guidance below to confirm the issue, understand who it affects and ship a fix.

Moderate Level A WCAG 4.1.2 — Name, Role, Value

What’s wrong

An expandable control like an accordion button does not expose expanded or collapsed state.

Why it matters

Screen reader users need state announcements to know whether content is open. Without it, interaction becomes guesswork.

How to fix it

Use semantic HTML and valid ARIA so assistive technology gets the same state and structure as sighted users. Keep labels and states explicit in markup.

Before
<button aria-controls="faq1">Shipping details</button>
<div id="faq1" hidden>Ships in 2 days.</div>
After
<button aria-controls="faq1" aria-expanded="false">Shipping details</button>
<div id="faq1" hidden>Ships in 2 days.</div>

If this pattern is generated by a component, fix it once in the shared component so every instance inherits the accessible behavior.

Learn more