Progress

Example (a11y tier)

Import

import Progress from 'abaabil/progress'         // structure only

import Progress from 'abaabil/progress/styled'  // + CSS

import Progress from 'abaabil/progress/a11y'    // + label/description/valueText

What a progress bar announces

A bare <progress value="3" max="8"> is announced as “38 percent”. That is right for a percentage and wrong for everything else, which is most things: files copied, steps completed, seconds remaining. valueText sets aria-valuetext, which assistive technology reads in place of the percentage.

A <label> alone does not name it

<progress> is a labelable element, so <label for> is not wrong, but no accessible name is computed from it: axe names an <input> from identical markup and names neither <progress> nor <meter>. This tier points aria-labelledby at the label as well, so the name is explicit rather than left to differ between implementations. It is the kind of gap that a passing audit misses, because axe's progress-bar rule only inspects an explicit role="progressbar" and skips the native element entirely.