Progress ring
Keyboard
ProgressRing displays completion. It does not need keyboard interaction or focus.
Semantics
Use aria-label or aria-labelledby to name the task. A number alone is not enough.
Checklist
- Name the task with
aria-labeloraria-labelledby. - Keep the ring and accessible value in sync with progress from 0 to 100.
- Use
Spinnerwhen progress is unknown, and announce completion or failure separately.
For contrast, zoom and screen reader checks, see the common accessibility checklist.