Ensures Every ARIA Progressbar Node Has an Accessible Name
Blind
Low vision
Mobility
WCAG 2.2 Level A
Written and researched for humans by humans
Casandra Visser
Author
Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments:
0
All Aria progressbar elements must have clear text that describes the destination, purpose, function, or action for screen reader users.
Why It Matters
When elements with a role=”progressbar” attribute do not have an accessible name, screen readers are unable to relay their purpose to users.
Fixing the Issue
Developers should check that all elements with role=”progressbar” have a discernible and accessible name.
Good Code Example
The aria-progressbar-name rule has three markup patterns that pass test criteria:
Code example
<div role="progressbar" id="alb" aria-labelledby="labeldiv"></div>
<div role="progressbar" id="combo" aria-label="Aria Name">Name</div>
<div role="progressbar" id="title" title="Title"></div>
Copy
Bad Code Example
The aria-progressbar-name rule has four markup patterns that fail testing criteria:
Code example
<div role="progressbar" id="empty"></div>
<div role="progressbar" id="alempty" aria-label=""></div>
<div role="progressbar" id="albmissing" aria-labelledby="nonexistent"></div>
<div role="progressbar" id="albempty" aria-labelledby="emptydiv"></div>
<div id="emptydiv"></div>
Copy