ARIA progressbar elements must have accessible names
Content available in English only.
Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
Every progress bar must have a descriptive name; numeric values alone are not enough.
Why this matters and how to fix it
Why this matters
Progress bars convey the state of an ongoing process. Without an accessible name, screen reader users hear only numeric values without context, making it impossible to understand what the progress represents.
How to fix this issue
Provide a descriptive accessible name explaining the progress bar’s purpose (e.g., 'File upload progress'). For determinate progress bars, include `aria-valuemin`, `aria-valuemax`, and `aria-valuenow`. For indeterminate progress bars, omit value attributes but provide an accessible name.
Developer guidance
Ensure all progress bar components have a required label prop. Prefer the native `<progress>` element for built-in semantics. For dynamic updates, confirm that screen readers announce both name and changing values correctly. For indeterminate states, clearly describe the ongoing activity without misleading numeric values.
Code examples
Incorrect Implementation
<div role="progressbar" aria-valuenow="70"></div>Correct Implementation
<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70" aria-label="File upload progress"></div>Real-World Examples
Before
<div role="progressbar" aria-valuenow="45"></div> <!-- Screen reader announces '45%' only, no context -->After
<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="45" aria-label="Survey completion progress"></div> <!-- Screen reader announces 'Survey completion progress, 45%' -->Manual testing
- 1. Identify all elements with `role="progressbar"`.
- 2. Verify each has a descriptive accessible name (`aria-label` or `aria-labelledby`).
- 3. For determinate progress bars, ensure `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` are correct.
- 4. Test with a screen reader to confirm the name and value are announced properly.
- 5. For indeterminate progress bars, ensure the accessible name conveys the ongoing process.
Trusted by organizations across Europe working toward WCAG and EAA conformance