Line Progress Bar
How the Line Progress Bar works with a keyboard and assistive tech, and where it stands against WCAG 2.2 AA.
The Line Progress Bar is a role="progressbar" with aria-valuenow, aria-valuemin and aria-valuemax. It has no text of its own, so it is named with aria-label. When a parent already reads the value (a card that says "55%"), pass decorative and it is hidden instead.
Keyboard#
Passes over the bar: it is not focusable.
Semantics#
role="progressbar"Read as a progress bar with its value.
Always, unless decorativearia-valuenow / min / maxThe value is clamped between 0 and 100.
Always, unless decorativearia-labelName it after the task, such as "Upload progress" or "Battery".
Always, unless decorativearia-hiddenFor a bar beside text that already gives the value.
decorativearia-valuetextNot set. For "6 of 10 GB" rather than a percentage, add it.
Units matterColour contrast#
Every variant and state has to meet WCAG 2.2 Level AA. Measure the colours as they land on screen: a translucent hover or press wash over whatever sits behind it.
Fill · Fill against track
The fill carries the value, so it needs 3:1 against the track beside it. The track itself need not contrast with the page.
WCAG 1.4.11 Non-text Contrast ↗Measured contrast#
A lit tick in each tone against an unlit one, on white and on #fcfcfc, from the bar's tokens. Ticks are graphics and are held to 3:1. 4 of 6 pairs fall below their minimum (4.5:1 for text, 3:1 for graphics) and are marked in amber.
Motion#
- Ticks fade in as they light, over 200ms; under prefers-reduced-motion they switch at once.
- Progress is not announced as it moves. Announce completion once, in a polite live region.
Checklist#
Success green and Warning orange are under 3:1 against unlit ticks. Show the value as text next to them, as a title with a percentage does.
Name the bar after the task ("Uploading report.pdf"), not "Progress".
Announce start and finish, not every step.
For a quota, add aria-valuetext with the units.