Digital Accessibility Knowledge Base

aria-progressbar-name

ARIA progressbar must have an accessible name

Who might be affected
Screen Reader
Low Vision
Voice Control

Description

role="progressbar" is the semantic representation of an element that displays the progress status for tasks that take a long time. However, when it has no accessible name, screen reader users don't have the context of what the progressbar is referring to and what they are actually waiting for.
Learn more about accessible names

Quick Fixes

Ensure that all elements that have the role=”progressbar” attribute are properly labeled. You can use one of the methods shown below.
Note that text within the progressbar and the "aria-valuetext" attribute can't be referred to as the accessible name since they usually change according to the progress's state so they can’t mediate a clear context.

1✓ <div role="progressbar"
2        aria-label="Page loading"
3        aria-valuenow="20"
4        aria-valuemin="0"
5        aria-valuemax="100">
6        20 %
7   </div>
8

9✓ <div id="progress-label">Uploading Image</div>
10   <div role="progressbar"
11        aria-labelledby="progress-label"
12        aria-valuenow="5"
13        aria-valuemin="0"
14        aria-valuetext="Uploaded 5%..."
15        aria-valuemax="100"></div>
16

17

18

19✓ <div role="meter"
20      aria-valuenow="90"
21      aria-valuemin="0"
22      aria-valuemax="100"
23      aria-label="Battery level"></div>
24

25   <div id="fuel-tank-label">My Fuel Tank (Liters)</div>
26✓ <div role="meter"
27      aria-valuenow="35"
28      aria-valuemin="0"
29      aria-valuemax="40"
30      aria-labelledby="fuel-tank-label"></div>
31

1✗ <div role="progressbar"
2        aria-label="Page loading"
3        aria-valuenow="20"
4        aria-valuemin="0"
5        aria-valuemax="100">
6       20 %
7   </div>
8

9✗ <div id="progress-label">
10<!-- An element with no text node within it to establish the accessible name -->
11   </div>
12   <div role="progressbar"
13        aria-labelledby="progress-label"
14        aria-valuenow="5"
15        aria-valuemin="0"
16        aria-valuetext="Uploaded 5%..."
17        aria-valuemax="100"></div>

How Users Are Affected

An accessible name is intended, among other things, to provide users of assistive technologies with the context of certain elements. For example, in the context of a progressbar element, the accessible name will provide the context for what the progressbar indicates and what is the action that should complete. When a progressbar element has no accessible name, screen reader users will have difficulty or will not understand what it represents at all.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
1.1.1 Non-text-content (A) | 4.1.2 Name, Role, Value (A)