What This Rule Checks
Elements with the role=”progressbar” represent the progress of a task and must have a clear and accessible name. This ensures that users of assistive technologies, such as screen readers, can understand what the progress bar represents.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
Progress indicators without names leave screen reader users guessing what process they’re waiting for. On pages with multiple progress bars, the lack of labels makes it impossible to distinguish between them.
How to Fix
- Add a non-empty aria-label attribute to the progressbar element.
- Use the aria-labelledby attribute to point to an element that contains readable text.
- Alternatively, use the title attribute to provide an accessible name
Code Examples
<!-- Progressbar with no accessible name -->
<div
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100">
</div>
Copy
<!-- Progressbar with descriptive name -->
<div
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
aria-label="File upload progress: 60%">
</div>
Copy
Common Mistakes to Avoid
- Labeling the progressbar with the percentage alone instead of what it tracks.
- Not updating aria-valuenow dynamically as progress changes.
- Using role=”progressbar” on decorative loading spinners that don’t represent real progress.
Tip: Remember the first rule of ARIA: don’t use ARIA if a native HTML element can provide the same semantics. Native elements come with built-in keyboard handling and screen reader support that ARIA cannot replicate.
Related WCAG Criteria
- 1.1.1: Non-text Content