Briefly discuss the step or identify the milestone.
Progress tracker
Other names: process indicator, step list
A progress tracker displays the steps and progress through a journey.
Use the progress tracker to show:
- Milestones
- Timelines
- Chronological steps
Horizontal tracker
Step 1
Briefly discuss the step or identify the milestone.
Step 2
Keep the message clear and concise.
Step 3
Do not link to more information from the tracker.
Step 4
Instead, link to additional information in your body content or tracker caption.
Step 1
Briefly discuss the step or identify the milestone.
Step 2
Keep the message clear and concise.
Step 3
Do not link to more information from the tracker.
Step 4
Instead, link to additional information in your body content or tracker caption.
Vertical tracker
-
Step 1 ContributorMonth and year
-
Step 2 ContributorMonth and year
Keep the message clear and concise. -
Step 3 ContributorMonth and year
Do not link to more information from the tracker. -
Step 4 ContributorMonth and year
Instead, link to additional information in your body content or tracker caption.
-
Step 1 Contributor
Month and year
Briefly discuss the step or identify the milestone.
-
Step 2 Contributor
Month and year
Keep the message clear and concise.
-
Step 3 Contributor
Month and year
Do not link to more information from the tracker.
-
Step 4 Contributor
Month and year
Instead, link to additional information in your body content or tracker caption.
Step list
-
Give your steps a clear, concise title
The step list is a good fit for lengthy content. Use this space to discuss the step or identify the milestone. If there is information that your visitor must know before completing this step, you can talk about that here too. -
Make your steps actionable
Be sure to tell your visitor exactly what they have to do to complete the step. If the process is not fully fleshed out, then this component may not be the best fit for your content. -
Conclude the process
All good things must come to an end. Tell your reader how to complete their task. If needed, you can link to additional information in the step list content.
-
Give your steps a clear, concise title
The step list is a good fit for lengthy content. Use this space to discuss the step or identify the milestone. If there is information that your visitor must know before completing this step, you can talk about that here too.
-
Make your steps actionable
Be sure to tell your visitor exactly what they have to do to complete the step. If the process is not fully fleshed out, then this component may not be the best fit for your content.
-
Conclude the process
All good things must come to an end. Tell your reader how to complete their task. If needed, you can link to additional information in the step list content.
Usage
When and how to use it
The progress tracker shows visitors where they are in a process. It can be used to help visitors navigate through processes by selecting steps.
Progress trackers should display three or more steps or events in a sequence.
How not to use it
Do not use the progress tracker to display items that are out of order or unrelated. Use bullet points instead.
Do not use the progress tracker component if there is not a fleshed out process to track.
Accessibility
Standard accessibility review
Each time a new component version is published:
- Test with the axe accessibility tool
- Review with the VoiceOver or NVDA screen reader
- Ensure all actionable elements are accessible by keyboard command and tab in a logical order
- Check the component layout on a variety of screen sizes