Progress Indicator
Sometimes it's helpful to show a user their progress in a linear process. A progress indicator communicates to a user the steps or stages of important instructions or processes in addition to what parts of the process were completed.
Some examples include:
(source: Progress Trackers in UX Design)
and
(source: Semantic UI Docs)
A step indicator is composed of two parts: a list of steps in a process and a heading for the current state.
On mobile devices the step names are often hidden, making the step indicator function more as a progress bar.
Use a step indicator to communicate where a user is within a multi-step process. There should be at least 3 steps.
-
Don’t use a step indicator when there is a variable progress to display. In that case, use the ARIA role progressbar.
-
Don’t use a step indicator if there are so many steps that they aren’t all visible at one time.
-
Don’t use it as navigation (and it's not helpful on mobile).
Step indicator includes a heading. Don’t use the step indicator heading as the page heading, as it is part of the component, and the page heading should lie outside of the component.
Making the page heading (outside of the component) accessible
- Placing the heading above the step indicator allows the step indicator to be seen by the screen reader after arriving at the heading. For example, if a screen reader user 'skips to main content', they would hear the page heading, and next arrive at the step indicator component.
- If the h1 page heading does not visually include the step number, include SR-only text in the heading to include "Step x of y" and consider including status like "completed" or "not completed” For example, if the h1 reads "Cool page heading", the screen reader should say "Cool page heading, step 1 of 5" or "Cool page heading, step 1 of 5 not completed"
- The list of steps should include
aria-label=”progress”. - The current step should include
aria-current=”true”. - Steps that aren’t completed should include screen-reader-only text of “not completed” or similar to convey their status in a non-visual manner.
-
aria-label=”Page heading step 1 of 5”applied to the page heading<h1>Page heading</h1>will announce the step numbers for a screen reader
The step indicator must:
- Be announced as displaying progress
- Announce which step is the current step
- Announce whether items are not completed
The heading must:
- Appear in a list of headings in an appropriate location
- Heading must communicate the current step (e.g. step 2 of 7)
- h1 page heading should not be part of the step indicator component
- DOL- Unemployement Insurance (private repo) (uses a custom heading component along with the react-uswds step indicator)
- Managed Care Review
USWDS has helpful additional guidance: https://designsystem.digital.gov/components/step-indicator/