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 id="cart-status">Item added</div> <!-- silent DOM update -->

Why it matters

Screen-reader users who need spoken confirmation of saves, errors, and results.

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

The status text must be wired as a live region (code that makes screen readers announce updates)/status role so screen readers announce it automatically without moving focus.

<div id="cart-status" role="status" aria-live="polite">Item added</div>

role="status" with aria-live announces the update to screen reader users without moving their focus.

Outcome

On a recipe site's ingredient list, this barrier is gone for screen-reader users who need spoken confirmation of saves, errors — they can finish what they came here to do.

Who is affected