• June 1, 2025

Accessible Naming for ARIA Progressbars

Rule ID: aria-progressbar-name
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549

How to Fix the Problem

Each element with role="progressbar" must have a discernible name that can be read by assistive technologies like screen readers. There are three correct methods for providing this name:

1. Using aria-labelledby Attribute

   html

   KopierenBearbeiten

   <div role="progressbar" id="progress1" aria-labelledby="label1"></div>
<div id="label1">Loading Status</div>


   • This associates the progressbar with visible text elsewhere in the document.

   • Ensure that the ID referenced by aria-labelledby exists and that the referenced element contains readable, visible text.

2. Using aria-label Attribute

   html

   KopierenBearbeiten

   <div role="progressbar" aria-label="Uploading Files"></div>


   • Use when there is no suitable visible text on the page.

   • The value must not be empty.

3. Using the title Attribute

   html

   KopierenBearbeiten

   <div role="progressbar" title="Downloading Update"></div>


   • Though less preferred, screen readers may use the title attribute if other naming methods are unavailable.

Common Mistakes to Avoid

• Empty aria-label:

  html

  KopierenBearbeiten

  <div role="progressbar" aria-label=""></div> <!-- Fails -->


• aria-labelledby references a nonexistent element:

  html

  KopierenBearbeiten

  <div role="progressbar" aria-labelledby="missingLabel"></div> <!-- Fails -->


• aria-labelledby points to an element without content:

  html

  KopierenBearbeiten

  <div role="progressbar" aria-labelledby="emptyDiv"></div>
<div id="emptyDiv"></div> <!-- Fails -->


• No accessible name at all:

  html

  KopierenBearbeiten

  <div role="progressbar"></div> <!-- Fails -->


Why it Matters

Screen reader users rely on accessible names to understand the function and status of UI elements. A progressbar without a discernible label creates a barrier, as users cannot determine what the bar is indicating—such as whether it’s showing upload progress, form completion, or another process. Providing an accessible name ensures equal access and supports inclusive design practices.

Rule Description

ARIA progressbar elements are meant to indicate the status of ongoing processes. For these elements to be accessible, they must have a clearly defined name that screen readers can interpret. This name conveys the element’s purpose or current task to users who cannot see visual progress indicators.

The Algorithm (in Simple Terms)

The rule checks every element with role="progressbar" and ensures:

• It has a non-empty aria-label,

• OR an aria-labelledby attribute pointing to a valid element with readable text,

• OR a non-empty title attribute.

If none of these are present or valid, the element fails the rule.