Every ARIA progressbar node must have an accessible name

ARIA progressbar elements must have accessible names.

About This Rule

This rule ensures that elements with role="progressbar" have discernible text that clearly describes their purpose or function for screen reader users.

Why It Matters

Screen reader users cannot discern the purpose of elements with role="progressbar" that lack an accessible name. This omission hinders their ability to understand the function or status represented by the progressbar, leading to confusion and a diminished user experience.

How to Fix

Ensure each element with role="progressbar" has one of the following:

• A non-empty aria-label attribute.
• An aria-labelledby attribute pointing to an element with discernible text for screen readers.
• A title attribute providing descriptive text.

Example

Fail

The following example lacks an accessible name for the progressbar element, making it unclear to assistive technology users:

<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>

Pass

In this corrected example, the aria-label attribute provides an accessible name for the progressbar element:

<div role="progressbar" aria-label="File upload progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>