BEFORESpinner only (not announced, allows repeated clicks)
Problems: the spinner is visual-only, the button stays active, and users can trigger overlapping loads with no clear completion message.
Example “Recommended items”
Loading…
Try: click “Load recommendations” twice quickly. Notice how the UI doesn’t explain what happened.
AFTERBusy semantics + polite status + disable controls
Pattern: mark the region aria-busy, disable the triggering control to prevent double submits, and announce start/complete via a status region.
Example “Recommended items”
Loading recommendations…
Try: click once. Notice the button disables and you get a “Loaded …” announcement.
Quick checklist
- Provide text for the loading state (not just a spinner).
- Prevent double-submits: disable the trigger while loading (or de-bounce).
- Mark the affected region
aria-busy="true"while it’s updating. - Announce meaningful transitions via
role="status": “Loading…” then “Loaded …”. - Respect
prefers-reduced-motion(avoid nonstop shimmer/spin for motion-sensitive users).