• 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 

<div class="event-tabs">
  <div class="tab active" onclick="showTab('details')">Details</div>
  <div class="tab" onclick="showTab('guests')">Guests</div>
  <div class="tab" onclick="showTab('recurrence')">Recurrence</div>
</div>
<!-- no role="tablist"/"tab" and no aria-selected; "active" is a CSS class only -->

Why it matters

A screen reader user switching to the Guests tab hears no confirmation the panel changed, so they may keep editing the wrong section.

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

Update aria-selected on every tab whenever the active one changes, not just the CSS class.

<div role="tablist" aria-label="Event details">
  <button role="tab" aria-selected="true" id="tabDetails">Details</button>
  <button role="tab" aria-selected="false" id="tabGuests">Guests</button>
  <button role="tab" aria-selected="false" id="tabRecurrence">Recurrence</button>
</div>
<div role="tabpanel" aria-labelledby="tabDetails">...</div>

Outcome

An organizer switches to the Guests tab and hears it announced as selected right away.

Who is affected

Screen reader users creating an event cannot tell which tab is active or that switching tabs worked.

Learn more

Related scenarios