Names, roles & states

A Progress Bar Has No Name

Screen readers announce a progress bar and its value, but not what is loading or how far a person is through a task.

aria-progressbar-nameWCAG 2.0Introduced in WCAG 2.0.Level AA — the minimum. Missing it blocks people outright.

Status: SeriousSerious — Significant friction, or information that is lost.CurrentScanners run this rule today.
Owner: DesignDevTest
Audit: Automated+ManualA scanner finds it; a person confirms the fix.

Why it matters

A progress bar shows how far along something is — an upload, a download, or the steps in a form. Sighted people can usually tell what it's for from the text nearby.

Without a name, a screen reader only says "progress bar, 40%". If a page has two bars, people can't tell them apart or know what they're waiting for.

Who it affects

Who it affects, and how much
Who	What they experience	Impact
Screen reader users	They hear "progress bar, 40%" with no idea what is 40% done.	High impact
Low-vision users (magnification)	Affected only if they use a screen reader; the bar still looks the same on screen.	Partial impact

Business & product impact

Business & product impact, with how much each claim weighs
Area	Why	Impact
Legal	It relates to WCAG 1.1.1 at Level A, the minimum. Australia's Disability Discrimination Act complaints point to WCAG 2.2 Level AA, and EN 301 549 applies in Europe.	High impact
Conversion	In uploads and multi-step checkouts, people who don't know what's happening may give up or start again.	Moderate impact
SEO	No real search benefit — don't sell it as one.	Low impact
Brand trust	Waiting without knowing why feels broken. People remember that.	Low impact
Cost to fix	A one-line fix. Fix it once in the shared progress component.	High impact

Fixing it in code

Name the bar with its visible label

Don't

<p>Uploading report.pdf</p>
<div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>

A screen reader says: “progress bar, 40%”

<p id="upload-label">Uploading report.pdf</p>
<div role="progressbar" aria-labelledby="upload-label" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>

A screen reader says: “Uploading report.pdf, progress bar, 40%”

aria-labelledby points the bar to the text that already describes it.

A bar with no visible label

Don't

<progress value="2" max="4" role="progressbar"></progress>

A screen reader says: “progress bar, 50%”

<progress value="2" max="4" aria-label="Checkout steps completed"></progress>

A screen reader says: “Checkout steps completed, progress bar, 50%”

aria-label gives a name when there's no visible text to point to.

Designer's handoff note

Give every progress bar a short visible label that says what is in progress, like "Uploading report.pdf".

Note that label in the design spec so developers can connect it to the bar.

Quick test

Tool

NVDA (opens in a new tab) (free on Windows)

Checklist

Step 1: Turn NVDA on with Ctrl Alt N.
Step 2: Start an upload or open a page with a progress bar.
Step 3: Press the down arrow to read through to the bar.
Step 4: Listen to what is announced.

Pass: You hear what is in progress, like "Uploading report.pdf, progress bar, 40%".
Fail: You hear only "progress bar" and a number.

What a green scan still misses

A scanner checks that a name exists. It can't tell whether the name is clear, or whether progress updates are announced at all.

Reference

Rule ID: aria-progressbar-name
Raised by: axe-core: “ARIA progressbar nodes must have an accessible name”
WCAG: 1.1.1 Non-text Content (opens in a new tab) · Level A · since WCAG 2.0
Other standards: EN 301 549 9.1.1.1 · RGAA 11.1.1
Read more: Deque University: aria-progressbar-name (opens in a new tab)
Last reviewed: 14 October 2026