aria-progressbar-name
Web validation
progressbar elements must have an accessible name.A progressbar shows how much of a long-running task has finished. When the component lacks an accessible name, assistive technology users hear only the percentage, not what is loading or uploading. Adding a steady, descriptive name lets people understand the context and decide whether to wait or move on.
Pass Patterns
Using aria-label attribute
The component is given a direct text alternative.
<div
role="progressbar"
aria-label="File upload progress"
aria-valuenow="30"
aria-valuemin="0"
aria-valuemax="100">
30%
</div>Using aria-labelledby attribute
Visible text is referenced, so the same wording serves sighted and non-sighted users.
<div id="load-desc">Page loading</div>
<div
role="progressbar"
aria-labelledby="load-desc"
aria-valuenow="55"
aria-valuemin="0"
aria-valuemax="100">
55%
</div>Fail Patterns
No name at all
Assistive technologies announce only a generic role.
<div
role="progressbar"
aria-valuenow="40"
aria-valuemin="0"
aria-valuemax="100">
40%
</div>Empty aria-label attribute
An empty string still leaves the element unnamed.
<div
role="progressbar"
aria-label=""
aria-valuenow="70"
aria-valuemin="0"
aria-valuemax="100">
70%
</div>WCAG techniques
Sufficient techniques
- ARIA16: Using aria-labelledby to provide a name for user interface controls
- ARIA14: Using aria-label to provide an accessible name where a visible label cannot be used
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page, open a screen reader.
- Navigate to the
progressbar. - Listen to what the screen reader announces.
Expected result: The reader announces the accessible name followed by the value, such as “File upload progress, 30 percent.”
Actual result: Without a name, only “progress bar, 30 percent” or simply “progress bar” is read.
Inspecting the browser dev-tools
- Open the Accessibility Tree panel.
- Select the
progressbarelement.
Expected result: The Name field shows the text supplied by aria-label or aria-labelledby.
Actual result: If unnamed, Name is empty.
FAQ
How does this issue relate to 1.1.1 Non-text Content?
SC 1.1.1 requires every non-text item that conveys information such as a progressbar to have a text alternative that describes its purpose. An accessible name satisfies that requirement.
Why is this issue marked as Serious?
Without context, people who rely on assistive technology cannot tell what operation is underway or whether it concerns them. This hampers task completion across all major browsers and screen readers, so the impact is significant.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 1.1.1 Non-text Content (A) | All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for controls/input, time-based media, tests, sensory experiences, CAPTCHA, and decoration/formatting/invisible content. |
| EN 301 549 | 9.1.1.1 Non-text Content | Same as the WCAG text. |