Progressbar Accessible Name

Why It Matters

• Without a name, progress bars are meaningless. A screen reader that announces "progressbar 75%" gives the user no idea what is 75% complete. Is it a file upload? A checkout flow? A loading spinner? The number alone is useless without context.
• Multiple progress bars become indistinguishable. A page with several progress indicators — like a multi-step form with an overall progress bar and individual section progress — becomes impossible to navigate if none of them have labels.
• It is a basic accessibility requirement. WCAG requires that all interactive and informational elements have accessible names. A progress bar without one fails accessibility checks and creates a barrier for users who rely on assistive technology.
• Sighted users benefit too. Adding a visible label alongside the progress bar helps everyone understand what it represents. Good labeling is not just an accessibility technique — it is good design.

How to Add One

1. Use aria-label for invisible labels. Add aria-label="File upload progress" directly to the progress element. The screen reader will announce the label along with the current value, giving full context without adding visible text.
2. Use aria-labelledby for visible labels. If there is already visible text near the progress bar that describes it, add an ID to that text element and point to it with aria-labelledby. This connects the existing text to the progress bar for assistive technology.
3. Be specific in your label. "Progress" is not helpful. "Uploading resume.pdf" or "Checkout step 2 of 4" gives users the context they need. The label should describe the specific process being tracked.
4. Use the native progress element. The HTML <progress> element has built-in semantics that screen readers understand. It automatically communicates the role and current value — you just need to add the label.
5. Update aria-valuenow as progress changes. If you are using a custom progress bar with role="progressbar", update the aria-valuenow, aria-valuemin, and aria-valuemax attributes as progress changes so screen readers announce accurate values.

Common Mistakes

• Using role="progressbar" without any label. Adding the ARIA role tells screen readers that the element is a progress bar, but without aria-label or aria-labelledby, it still has no name. The role alone is not enough.
• Writing vague labels. "Loading" or "Progress" as a label does not tell the user what is loading or progressing. Be as specific as possible — "Loading search results" is much more useful than just "Loading."
• Forgetting to update dynamic values. A progress bar that visually fills up but does not update its ARIA attributes leaves screen reader users stuck at the initial value. Keep aria-valuenow in sync with the visual display.
• Building custom progress bars without ARIA roles. A <div> styled to look like a progress bar is just a colored rectangle to assistive technology. Add role="progressbar" along with all required ARIA attributes and a label.