• Success Criterion 4.1.3
  • Conformance level AA

Multi-Step Progress Update Never Exposed to Screen Readers

4.1.3 — Status Messages

Scenario

Setting

A coworking-space booking app

What’s wrong

Multi-step progress ("Step 2 of 4 complete") status changes not exposed.

Example 

<div class="booking-steps">
  <p id="stepStatus">Step 1 of 4: Choose a space</p>
</div>
// JS: completeStep(n, total, label) sets stepStatus.textContent = `Step ${n} of ${total}: ${label}`
<!-- stepStatus updates its text on every step transition, but has no role="status" or aria-live -->

Why it matters

A member booking a desk hears no confirmation moving from step one to step two, and may think their selection wasn't saved.

How to test

Advance a multi-step process ('Step 2 of 4 complete') with a screen reader running: if the step change isn't announced, it fails.

How to fix

Announce the step change right after the transition completes, not while the next step's content is still rendering.

<p id="stepStatus" role="status" aria-live="polite">Step 1 of 4: Choose a space</p>

Outcome

A member hears "Step 2 of 4: Pick a date" and knows their space choice went through.

Who is affected

Screen reader users booking a coworking space cannot track their progress through the multi-step flow.

Learn more

Related scenarios