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-label or aria-labelledby.
  • Keep the ring and accessible value in sync with progress from 0 to 100.
  • Use Spinner when progress is unknown, and announce completion or failure separately.

For contrast, zoom and screen reader checks, see the common accessibility checklist.