aria-progressbar-name

ARIA progressbars must have accessible names.

Description

For screen reader users, it is essential that ARIA progressbar elements have clear and descriptive text that accurately conveys the purpose, function, action, or destination they represent. This ensures that screen reader users can easily understand and navigate the progressbar and its associated functionality.

Why is it important?

The accessible name serves the purpose of providing context to users of assistive technologies, allowing them to identify and understand certain elements. When it comes to progressbar elements, the accessible name plays a crucial role in conveying the meaning and action associated with the progressbar. Without an accessible name, screen reader users may struggle to grasp the purpose and functionality of progressbar elements with the role="progressbar" attribute.

Examples

• Success:

  • <div> element with role="progressbar" has a non-empty aria-labelledby attribute pointing to an element with text which is discernible to screen reader users.

• Failure:

  • <div> element with role="progressbar" has an empty aria-label attribute.

How to fix?

Ensure that each element with role="progressbar" has an accessible name using one of the following -

1. An aria-labelledby attribute that references elements that are visible to screen readers.
2. A non-empty title attribute.
3. A non-empty aria-label attribute.

Tags

cat.aria, wcag2a, wcag111

References

• WCAG 1.1.1: Non-text Content
• Deque University: aria-progressbar-name
• Accessibility Insights: aria-progressbar-name
• Evinced Digital Accessibility Knowledge Base: aria-progressbar-name