How to build an accessible RadialProgress in React
Renders a div with role="progressbar", aria-valuenow (clamped 0–100), aria-valuemin=0, aria-valuemax=100. Provide aria-label when no visible label describes the metric being measured.
When to use a RadialProgress
- Dashboard KPI metrics showing completion percentage
- Skill or profile completion meters
- Storage or quota usage displays
When not to use it
- Unknown-length operations where completion is not measurable — use Spinner
- Linear progress where a bar is more readable — use Progress or ProgressBar
- Comparing multiple values against each other — use a chart component
Accessibility
Role progressbar, verified at WCAG 2.2-AA.
Common mistakes
Avoid: <RadialProgress value={indeterminate} /> with a fake cycling value
Prefer: <Spinner /> for indeterminate loading states
RadialProgress implies a known completion percentage; fake cycling breaks the semantic contract
Example
<RadialProgress value={72} />