# ARIA progressbar nodes must have an accessible name

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/axe/4.11/aria-progressbar-name
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

When a progress bar lacks an accessible name, users who rely on assistive technologies have no way to distinguish it from other progress bars on the page or understand its purpose. Imagine a page with two progress bars—one for a file upload and one for a software installation. Without accessible names, a screen reader user would hear "progress bar" twice with no context for either. This issue primarily affects users who are blind or have low vision, as well as users with mobility impairments who may navigate using voice commands that reference element names.

This rule relates to **WCAG Success Criterion 1.1.1: Non-text Content** (Level A), which requires that all non-text content has a text alternative that serves the equivalent purpose. A progress bar is a non-text indicator of status, so it needs a text-based name to convey its meaning to assistive technology users. This criterion applies across WCAG 2.0, 2.1, and 2.2 at Level A, meaning it is a baseline requirement.

## How to Fix

Ensure every element with `role="progressbar"` has a meaningful accessible name using one of these techniques:

- **`aria-label`** — Provide a concise, descriptive label directly on the element.
- **`aria-labelledby`** — Reference the `id` of another element that contains visible label text.
- **`title`** — Use the `title` attribute as a fallback (though `aria-label` or `aria-labelledby` are preferred).

The name should clearly describe what process or task the progress bar represents, such as "File upload progress" or "Installation progress."

## Examples

### Failing: Progress bar with no accessible name

A progress bar with no labeling attributes is announced generically with no context.

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

### Failing: Empty `aria-label`

An empty `aria-label` provides no name, so the progress bar remains unlabeled.

```html
<div role="progressbar" aria-label="" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div>
```

### Failing: `aria-labelledby` pointing to a nonexistent or empty element

If the referenced element doesn't exist or has no text content, the progress bar still has no accessible name.

```html
<div role="progressbar" aria-labelledby="missing-id" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>

<!-- Or referencing an empty element -->
<div role="progressbar" aria-labelledby="empty-label" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>
<div id="empty-label"></div>
```

### Passing: Using `aria-label`

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

A screen reader will announce something like: "File upload progress, progress bar, 50%."

### Passing: Using `aria-labelledby`

```html
<h3 id="upload-heading">Uploading resume.pdf</h3>
<div role="progressbar" aria-labelledby="upload-heading" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
</div>
```

This approach is especially useful when a visible heading or label already describes the progress bar, keeping the visual and accessible names in sync.

### Passing: Using `title`

```html
<div role="progressbar" title="Installation progress" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
</div>
```

The `title` attribute works as a naming mechanism, but note that it may also produce a tooltip on hover. Prefer `aria-label` or `aria-labelledby` when possible for a more consistent experience across assistive technologies.