A: ARIA progressbar nodes must have an accessible name (WCAG 1.1.1)

• Meaning
• Impact
• Recommendation
• Examples

Ensure that every ARIA progressbar node has an accessible name.

This means

Elements with role="progressbar" indicate progress but often lack a name that explains what it is about. Screen readers then only announce a value, not the purpose. Users do not know which process is meant.

Impact

Without a clear name, it remains unclear whether the progress refers to upload, payment, import, or something else. This complicates orientation and leads to WCAG violations.

Recommendation

• Prefer using the native <progress> with a visible <label>.
• For role="progressbar", assign a name using aria-label or aria-labelledby.
• Specify values with aria-valuemin, aria-valuemax, and aria-valuenow.
• For indeterminate progress, omit aria-valuenow; the name remains mandatory.
• Add context with aria-describedby if needed.

Example

Problematic

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

Better

<p id="upload-label">Upload progress</p>
<div role="progressbar"
     aria-labelledby="upload-label"
     aria-valuenow="45"
     aria-valuemin="0"
     aria-valuemax="100">
</div>

Best (native elements)

<label for="prog">Upload progress</label>
<progress id="prog" max="100" value="45">45%</progress>