aria-progressbar-name

ARIA progressbar should be assigned an accessible name.

Description

Each element with role="progressbar" should have an accessible name. Providing an accessible name allows screen reader users to understand the purpose and function of the progress bar. Without a name, users may struggle to interpret the significance of the progress bar and its relation to the overall content or task. An accessible name offers context about what the progress bar represents or tracks, such as the completion status of a task or the loading status of a webpage.

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.

How to fix?

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

• An aria-labelledby attribute that references elements that are visible to screen readers.
• title attribute that is not empty.
• aria-label attribute that is not empty.

References

• WCAG 1.1.1: Non-text Content
• Accessibility Insights: aria-progressbar-name