• Success Criterion 4.1.3
  • Conformance level AA

Loading Spinner With No Programmatic Busy or Status State

4.1.3 — Status Messages

Scenario

Setting

A recipe site's ingredient list

What’s wrong

Loading/busy states ("Loading…", spinners) with no role="status" (code that makes updates announced) or aria-busy (code marking a region as loading) strategy.

Example 

<div class="ingredient-list">
  <div class="spinner"></div>
</div>
<!-- while ingredient quantities recalculate for a new serving size, a CSS spinner spins with no
     role="status" and no aria-busy on the list container -->

Why it matters

A cook using a screen reader who changes the serving size hears nothing while quantities recalculate, and may think the page froze.

How to test

Trigger a loading state with a screen reader running: if 'Loading…' or a spinner appears with no role="status" or aria-busy strategy, it fails.

How to fix

Pair aria-busy on the region being updated with a role="status" element announcing what's loading.

<div class="ingredient-list" aria-busy="true">
  <div class="spinner" role="status" aria-label="Recalculating ingredients"></div>
</div>
<!-- set aria-busy="false" on the container once the new quantities are rendered -->

Outcome

A cook hears "recalculating ingredients" and waits instead of assuming the page is stuck.

Who is affected

Screen reader users adjusting recipe serving sizes get no indication that new quantities are loading.

Learn more

Related scenarios