← Shorts hub · Read: why this matters

Loading indicators — BEFORE/AFTER

If your UI shows a spinner but doesn’t say what’s happening, screen-reader users can be left guessing. This micro-demo shows a visual-only spinner (BEFORE) vs a small, accessible status + progress pattern (AFTER).

BEFORE Visual-only spinner

Problem: the spinner has no text status; focus can move while content is still loading; no progress semantics.

(no status text)

Results will appear here.

AFTER Status + progress

Improvements: aria-busy on the results region, a role="status" message, and a determinate role="progressbar". Spinner motion respects prefers-reduced-motion.

Idle.
0%

Results will appear here.

Tip: For dynamic UI, combine an aria-busy region + a short status message + visible text (“Loading…”) so everyone gets the same signal.