Back to Info and Examples for Accessibility Insights for Web

aria-progressbar-name

ARIA progressbars must have accessible names.

Why it matters

An ARIA progressbar is a custom control corresponding to the HTML <progress> element. A progressbar represents progress on a task that takes a long time to complete. An accessible name is a word or phrase coded in a way that assistive technologies can associate it with a specific user interface object. Assistive technologies can then refer to the object by name, not just by type. When an ARIA progressbar doesn't an accessible name, people who use assistive technologies have no way of knowing its purpose.

How to fix

For each element with role="progressbar", provide an accessible name using one of the following methods.

Good

title attribute

Better

aria-label attribute

Best

aria-labelledby attribute referencing visible text

Example

Fail

A <div> element is coded to function as an ARIA progressbar. A <label> element is used in attempt to give the progressbar an accessible name. Although a <label> can be used with a <progress> element, its use with <div> elements is not supported, and so no programmatic association is made between the <label> and the <div>. Because the ARIA progressbar does not have an accessible name, people who use assistive technologies can't tell its purpose.

<label for "progressbar">Creating your video</label>
<div id="progressbar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
<svg width="100" height="100" class="fill"  aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" fill="currentColor">
</rect>
</svg>
</div>

Pass

The <label> element is replaced with a <p> element, and a programmatic association is created by an aria-labelledby attribute on the <div>. The ARIA meter has an accessible name that's available to all users.

<p id="progressbar-label">Disk Usage</p>
<div role="meter" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" aria-labelledby="progressbar-label">
<svg width="100" height="100" class="fill"  aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" fill="currentColor">
</rect>
</svg>
</div>

About this rule

This rule passes if ANY of the following is true:

Element has an aria-labelledby attribute that references elements that are visible to screen readers
Element has a non-empty aria-label attribute
Element has a non-empty title attribute

More examples

Understanding Success Criterion 1.1.1: Non-text Content