Accessibility
ARIA progressbar nodes must have an accessible name
Screen reader users are not able to discern the purpose of elements
with role="progressbar" that do not have an accessible name.
The audit checks whether ARIA progressbars on a web page have a programmatically determined and meaningful accessible name associated with them. If a progressbar lacks this, it means that users with disabilities may not have a clear understanding of the progress of a task, which can lead to a less inclusive and user-friendly experience.
Fixing the problem
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>
Ensure that each element with role="progressbar" has one of the
following characteristics:
- Non-empty
aria-labelattribute. -
aria-labelledbypointing to element with text which is discernible to screen reader users.
Incorrect markup solutions
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>