ARIA
Progress bars need a name
- Rule:
aria-progressbar-name - Severity: Serious
- WCAG level A
Why it matters
A progress bar without a name announces a percentage and nothing else, so it is impossible to tell which of several operations it refers to.
How to fix it
- Add aria-label or aria-labelledby naming the task ("Upload progress").
- For an indeterminate bar, leave aria-valuenow off entirely rather than setting it to 0.
In markup
<div role="progressbar" aria-valuenow="40"></div><div role="progressbar" aria-valuenow="40" aria-label="Upload progress"></div>The requirement behind it
This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:
- 1.1.1 Non-text Content (opens in new tab) — WCAG level A
Further reading
Deque University on aria-progressbar-name (opens in new tab)
Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.
Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.