• Success Criterion 1.3.1
  • Conformance level A

Expandable Section With No Expanded/Collapsed State in Code

1.3.1 — Info and Relationships

Scenario

Setting

A customer-support live-chat widget

What’s wrong

Accordion/disclosure state visual-only: no aria-expanded (the open/closed state in code) on the trigger.

Example 

<button class="faq-toggle">Shipping delays</button>
<div class="faq-answer" style="display:none">Delays are currently 2-3 days.</div>

Why it matters

A screen reader user hears only "Shipping delays, button" with no hint whether the answer is already open or still hidden.

How to test

Click an accordion/disclosure trigger and check aria-expanded in DevTools before and after: if the attribute doesn't exist or doesn't flip true/false, it fails.

How to fix

aria-expanded reports open or closed state directly, updating each time the button is toggled by script.

<button class="faq-toggle" aria-expanded="false" aria-controls="faq-1">Shipping delays</button>
<div id="faq-1" class="faq-answer" style="display:none">Delays are currently 2-3 days.</div>

Outcome

A user hears Shipping delays, collapsed and knows to activate it before listening for an answer.

Who is affected

Screen reader users browsing chat FAQ topics can't tell which sections are expanded without opening each one.

Learn more

Related scenarios