Skip to main content

Steps

Steps can be used in multiple ways, but they are most commonly used to present a series of steps that a user must finish in order to complete a task or achieve a goal. They can be used to guide users through a process, to provide feedback on their progress, or to indicate the current step in a multi-step process.

Design Hints
Steps are a powerful tool for enhancing the user experience. It gives the user a clear indication of the user's progress, an approximate idea about the length of the process and give the user an idea of what data they will need to enter in future steps.
Accessiblity Hints
For accessibility, it's important to ensure that there are proper visible labels for each step. The current step should be indicated by using aria-current=step for those who may not be able to see the visual differences between the currently active and inactive steps.

Simple Steps

A simple horizontal stepper that can be used to present a series of steps and current step.

  1. 1

    Payment Details

  2. 2

    Address Details

  3. 3

    Confirm Details

  1. Payment Details Completed

  2. 2

    Address Details

  3. 3

    Confirm Details

Note: You can enhance the stepper by adding navigation buttons to the stepper to allow the user to move between steps.

Alternate Steps

An alternate style of static stepper with a bit more details.

  1. Payment Details
  2. Address Details
  3. Confirm Details
  1. Payment DetailsCompleted

  2. Address Details
  3. Confirm Details

Dynamic Steps

When there are a lot of steps or when the available space is limited, the non-active steps are represented with placeholder bars while the active step is expanded with additional information.

  1. Payment Details

Step 1 of 6 Enter Payment Details

  1. Address Details

Step 3 of 6 Enter Address Details

Note: The astrojs component dynamically generates the correct visuals based on the props passed to it.

Accessibility Testing Status

ComponentNVDAWindows NarratorWAVEAxeIBM Equal Access
Simple StepsYesYesYesYesYes
AlternateStepsYesYesYesYesYes
Dynamic StepsYesYesYesYesYes

Steps are effective when the order of the steps is clear and the user can easily understand the purpose of each step.