a11y/state-exposed

Why

When only a CSS class shows that a menu is open or a filter is on, a screen reader user hears the same "button" before and after the click and cannot tell what happened.

Fix

Bind the state attribute to the same variable that drives the class: aria-expanded on a button that shows and hides content, aria-pressed on a toggle button whose label stays the same, aria-checked on role="switch", aria-selected on tabs and options, aria-current="page" on the current navigation link. Prefer native state (<details open>, <input type="checkbox">) when it fits.

Examples

// bad: the state lives only in the class
<button className={open ? 'is-open' : ''} onClick={toggle}>Filters</button>
// good
<button aria-expanded={open} aria-controls="filters" onClick={toggle}>Filters</button>

Sources

• WCAG 2.2, Understanding SC 4.1.2 Name, Role, Value
• W3C, WAI-ARIA 1.2, states and properties

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/state-exposed