Ensures Every ARIA Progressbar Node Has an Accessible Name
Blind
Low vision
Mobility
WCAG 2.1 Level A
All Aria progressbar elements must have clear text that describes the destination, purpose, function, or action for screen reader users.
When elements with a role=”progressbar” attribute do not have an accessible name, screen readers are unable to relay their purpose to users.
Developers should check that all elements with role=”progressbar” have a discernible and accessible name.
The aria-progressbar-name rule has three markup patterns that pass test criteria:
<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
The aria-progressbar-name rule has four markup patterns that fail testing criteria:
<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