Role and semantics
Section titled “Role and semantics”Spinner renders an element with role="status"; the visually hidden label is the content of that region. The arc is hidden with aria-hidden. With decorative, the whole element is hidden.
Keyboard
Section titled “Keyboard”Spinner takes no focus and has no keyboard interaction.
It takes no focus. Do not move focus to the Spinner while loading; keep it on the control that started the action.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Default | “Loading”, as a polite announcement |
label="Saving" |
“Saving” |
decorative |
Nothing |
Contrast
Section titled “Contrast”The arc colour has at least 3:1 contrast on the background. Use the subtle tone only next to text.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Spinner meets it | What the product team does |
|---|---|---|
| 1.4.11 Non-text contrast | Arc at 3:1. | Do not place the arc on a low-contrast background. |
| 2.3.3 Animation from interactions | The turn stops under reduced motion. | Do not replace the turn with another animation. |
| 4.1.3 Status messages | role="status" and a localised label. |
Say what is loading with label. |