Components

Progress Tracker

Overview

Overview

When to use

• Requiring a user to complete a linear flow (form, questionnaire, etc) that includes 3 to 5 steps.
• Providing a user a sense of the overall process complexity while focusing on tasks one at a time.

When not to use

• When the flow has fewer than three or more than five steps.
• When the flow may be completed in any order.
• When the number of steps may change based on conditional logic.

If the flow needs more than 5 steps, consider how you might simplify it or break it up into multiple tasks.

Principles

Progress trackers help manage user’s expectations when completing a multistep process. They show which step the user is currently on, the total number of steps, and overall progress in completing a task.

Step labels should communicate what the user will accomplish in each step in preferably one or two words.

Help text

Tooltips or popovers can be used to give more context abut the step, if needed.

Interactions

Progress tracker can be configured as interactive or not interactive. Interactive variant allows a user to navigate back to previous completed steps.

Small screens

On small screens, only the label for the currently active step is displayed. Interactive variant displays the link to the previous step on top of the tracker.

Placement

The recommended placement of the progress tracker is between the main page title and content.

Usage

Usage guidelines

Number of steps

Use progress tracker for flows with 3-5 steps.

Do

Don't

Labels

Keep the labels short, preferably 1-2 words and use tooltips or popovers for extra context.

Do

Don't

Accessibility

Keyboard

A non-interactive tracker has no focusable parts. In an interactive tracker:

• Tab reaches the label of each completed step (a button), the mobile back button, and the info buttons of steps that have a tooltip.
• Enter or Space activate them.
• An info button shows its tooltip on focus; Escape hides it.

Upcoming steps and the current step are not buttons, since users can only go back to steps they have finished.

Screen readers

The tracker is a role="group" named by progressLabel (by default "Progress: Step 2 of 4"). The steps are a list (role="list" / role="listitem"), and the current step carries aria-current="step". Completed-step buttons start with visually hidden text, "Go back to" (backToLabel), so they are read as "Go back to Personal details". Info buttons are named "Info about" plus the step label (infoLabel) and point at their tooltip with aria-describedby. All step icons are aria-hidden="true".

Using the example

• progressLabel, backToLabel and infoLabel default to English; pass Estonian texts on Estonian pages.
• Update progressLabel and aria-current="step" whenever the step changes, and move focus to the heading of the new step.
• The step buttons only carry data-step-index. Your code does the navigation.
• Tooltips need the shared tooltip script on the page.
• Tooltip ids (<id>-tooltip-N) are derived from the tracker id, which must be unique.

Known limits

Completed steps are marked only with a check icon. Outside the interactive variant, where the "Go back to" text implies it, screen readers do not hear which steps are done. If that matters, add visually hidden text such as "(tehtud)" to completed labels in your copy.