( Perceivable / WCAG 1.1.1 )

ARIA progressbar has no accessible name

This check maps to Non-text Content. Use the guidance below to confirm the issue, understand who it affects and ship a fix.

Serious Level A WCAG 1.1.1 — Non-text Content

What’s wrong

An element with role="progressbar" has no accessible name, so its progress value is announced without context.

A screen reader user hears “45%, progress bar” with no way to tell what’s loading, uploading, or completing.

Give the progress bar a name that describes what it tracks.

Before

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

After

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