What does this accessibility issue mean?
For WCAG Level A compliance, check for the presence of a label or aria-label attribute on progressbar elements that indicate the progress of a task or process.
The label or aria-label attribute on progress bars helps users with disabilities understand the purpose and meaning of the progress bar element.
Example HTML violation: Inaccessible ARIA progressbar node name (WCAG 2.0 Level A Issue)
<!DOCTYPE html>
<html lang="en" class="no-js">
<head></head>
<body>
<title>Progress Bar Example</title>
<div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<span>75%</span>
</div>
</body>
</html>The above HTML violates the aria-progressbar-name accessibility rule because it does not provide an accessible name for the ARIA progressbar node (element with role="progressbar").
This rule ensures that the progressbar has a word or phrase coded in a way that assistive technologies can associate it with a specific user interface object.
Without an accessible name, people using assistive technologies, such as screen readers, would not be able to understand the purpose of the progressbar.
How to fix "Inaccessible ARIA progressbar node name (WCAG 2.0 Level A Issue)" issue
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>Progress Bar Example</title>
</head>
<body>
<div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="Progress Status">
<span>75%</span>
</div>
</body>
</html>In this corrected HTML, we have the aria-label attribute added to the div with the role="progressbar". The aria-label="Progress Status" provides an accessible name, "Progress Status", to the progressbar.
This name can now be read by assistive technologies, allowing users to understand the purpose of the progress bar.
Please check out the rule description of aria-progressbar-name for more details.
