aria-expanded must match the controlled region

Rule disclosure-state-match · Component patterns (best practice) · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

A disclosure control reports its state with aria-expanded and points at the region it shows with aria-controls. If aria-expanded="true" but that region is hidden, the announced state contradicts reality. (Detected when the region is hidden via markup; CSS-only hiding needs a live page.)

How to fix#

Keep aria-expanded in sync with the controlled region: set it to "true" only when the region is actually shown.

Example#

<div><button aria-expanded="true" aria-controls="r">Toggle</button><div id="r" hidden>Region</div></div>

<div><button aria-expanded="true" aria-controls="r">Toggle</button><div id="r">Region</div></div>

WCAG success criteria#

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Best practice

References#

• APG — Disclosure