ARIA progressbar elements must have accessible names
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
Progress bars communicate the status of ongoing tasks, such as uploading files or submitting forms. Without a clear accessible name, users relying on screen readers hear only a changing numeric value with no indication of what process is being tracked. This breaks the user’s mental model and can make it seem as though the interface is frozen or incomplete.
How to fix this issue
Add a descriptive name to each progress bar using aria-label or aria-labelledby. For example, use aria-label='File upload progress' to indicate what the bar measures. Ensure the name stays constant while the numeric value updates dynamically. Test that screen readers announce both the name and current value as it changes.
Developer guidance
Developers often forget labeling dynamic indicators when integrating upload components or async workflows. Ensure every progressbar in your component library includes a mandatory 'label' prop. Set up automated tests that simulate real-time value updates and confirm accessible announcements remain consistent across browsers and assistive tech.
Code examples
Incorrect Implementation
<div role="progressbar" aria-valuenow="70"></div>Correct Implementation
<div role="progressbar" aria-valuenow="70" aria-label="File upload progress"></div>
Trusted by organizations across Europe working toward WCAG and EAA conformance