How to build an accessible ProgressBar in React
role="progressbar" with value/max exposes completion to assistive tech; the label is wired via aria-labelledby and success/error states add a glyph so outcome is not color-only
When to use a ProgressBar
- Showing linear determinate progress of a task with a known percentage (value)
- Indicating ongoing work of unknown duration (omit value for indeterminate)
- Reflecting success/error outcome of a tracked operation (status)
When not to use it
- A compact circular indicator is preferred — use ProgressCircle
- Pure indeterminate spinning with no track — use Spinner
- Stepping through a multi-step flow — use ProgressIndicator
Accessibility
Role progressbar, verified at WCAG 2.2-AA.
Common mistakes
Avoid: A determinate ProgressBar with a faked, jumping value
Prefer: Omit value for an indeterminate bar when real progress is unknown
A determinate bar implies a meaningful percentage; faking it misleads the user
Example
<ProgressBar value={60} label="Uploading" />