Progress Spinner Accessibility
Best Practices
When shown on its own, a progress-spinner conveys a busy or loading state and is treated as a graphic.
The element wrapping the spinner must use role="img" and aria-label so assistive technology receives a meaningful name (for example, "Busy" or text that names what is loading).
The animated SVG icon must use aria-hidden="true" so the graphic is not announced separately from the labeled image container.
Interaction Design
This section provides detailed instructions for how different input types should navigate and operate the pattern.
Keyboard
Progress spinner elements are not interactive by default and therefore should not be keyboard focusable.
If a spinner is placed within an interactive element (such as a button or link), the interactive element must be keyboard accessible via TAB key.
Screen Reader
A screen reader will announce the progress spinner as an image along with its aria-label value.
Pointer
Progress spinner elements are not interactive by default and therefore are not clickable.
If a spinner is placed within an interactive element (such as a button or link), clicking the spinner will activate that interactive element.
ARIA Reference
| Attribute | Description |
|---|---|
| role="img" | Applied on the element that wraps the spinner animation so assistive technologies treat the busy indicator as one meaningful graphic. |
| aria-label | Applied on that same wrapper to provide the accessible name for the busy or loading state. |
| aria-hidden="true" | Applied on the inner svg so the decorative animation is not exposed separately from the labeled container. |