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 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 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

  1. 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.
  2. 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.
  3. 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.
  1. 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.
  2. 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.
  3. 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