Progress bar

How to test a progress bar

Gherkin Condensed

Given that I am on a page with a progress bar

1 Keyboard for mobile & desktop

WHEN I use the arrow key to browse to a progress bar I SEE the progress bar comes into view

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the arrow key to browse to a progress bar
- I HEAR The progress bar's purpose is clear
- I HEAR It identifies itself as a progress bar or progress indicator
- I HEAR It expresses its value if it dynamically changes

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to browse to a progress bar
- I HEAR The progress bar's purpose is clear
- I HEAR It identifies itself as a progress bar or progress indicator
- I HEAR It expresses its value if it dynamically changes

1 Keyboard only & screenreader

When I use	I see/hear
Tab	Nothing happens, progress bar is not typically focusable

2 Mobile screenreader gestures

When I use	I hear
Swipe	Reads the progress bar

3 Screenreader output for all devices

Reads	I hear
Name	The progress bar's purpose is clear
Role	It identifies itself as a progress bar or progress indicator
State	It expresses its value if it dynamically changes

Code examples

There are many variations of progressbars, some of which may not need to be a true progress bar at all.

WAI ARIA Multi-page form examples

Support varies by screen reader. It’s recommended to add full aria attributes, even when using a native <progress> element.

Use semantic HTML

This semantic HTML contains all accessibility features by default.

<progress role="progressbar"
          id="progress"
          class="progress"
          aria-label="File upload"
          value="25"
          aria-valuemin="0"
          aria-valuenow="25"
          aria-valuemax="100"
          max="100">
  25%
</progress>

25%

Developer notes

Name

Use aria-label="Progress bar name" when there is not a visible title.

Role

Use role="progressbar

Group

If the progress bar is describing another region of the page, use aria-describedby="progressbar-id" to connect the two elements.

State

The state will be read out to the screen reader user by default.

Focus

Progress bar is not usually focusable.