A button’s on/off state must be exposed
Rule
toggle-button-state· Links & buttons · impact serious · Static + live
Why it matters
A button styled as active — a highlighted filter chip, a selected view switch — carries its state in colour alone. A screen reader announces the same name whether it is on or off, so nothing tells the user which filter is applied or which view they are in. The state has to exist in ARIA as well as in CSS.
How to fix
For a two-state toggle add aria-pressed="true|false" and keep it in sync as the button is pressed. For a button that marks the current page or view, use aria-current instead. Never carry the state in a class alone.
Example
<button class="filter active">Unread</button>
<button class="filter active" aria-pressed="true">Unread</button>
Example
<button class="view is-selected">List</button>
<button class="view is-selected" aria-pressed="true">List</button>
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.
Standards
This rule contributes to the following standards:
WCAG A EN 301 549
| Standard | Criteria |
|---|---|
| EN 301 549 | 9.4.1.2 |