Success Criterion 4.1.2
Conformance level A

Accordion or Tab Missing Its Expanded or Selected State

4.1.2 — Name, Role, Value

Scenario

Setting

A calendar app's event-creation form

What’s wrong

Accordion/disclosure triggers missing aria-expanded (the open/closed state in code) — tabs missing aria-selected (the selected state in code)/tablist semantics.

Example

This shows up on a calendar app's event-creation form: accordion/disclosure triggers missing aria-expanded (the open/closed state in code) — tabs missing aria-selected (the selected state in code)/tablist semantics.

Why it matters

Screen-reader and voice-control users who can operate only what the accessibility tree exposes. In this case (a calendar app's event-creation form), they are excluded from part of the experience.

How to test

Toggle an accordion/tab component and check DevTools: aria-expanded/aria-selected should be present and update — missing attributes fail.

How to fix

Add aria-expanded (the open/closed state in code) to disclosure triggers and full tab/tablist/aria-selected (the selected state in code) semantics to tabs.

Outcome

Once corrected, a calendar app's event-creation form lets them get the same outcome as everyone else.

Who is affected

Screen-reader and voice-control users who can operate only what the accessibility tree exposes.

Learn more

Understanding Understanding document (opens in a new tab)