Stepper
A stepper guides users through a multi-step process by displaying all steps and indicating progress. It can be used when a task is divided into a fixed sequence of distinct steps that benefit from being shown as a whole. It is less suitable for short tasks of one or two steps, or branching processes where the next step depends on previous answers.
Accessibility Features
- A
<nav>landmark with a descriptivearia-labelidentifies the stepper as a specific navigation region. aria-current="step"identifies the current step.- Upcoming step controls are marked
disabledto indicate they cannot yet be navigated to. - Completed step controls must announce their state to screen readers. This can be done, for example, using a visually hidden text element.
- When the stepper navigates dynamically without a page reload,
<button>must be used for the controls. When each step has its own URL,<a>must be used. - If the stepper navigates dynamically, keyboard focus must move to the beginning of the step content when a step is activated (only required if the controls precede the content). If the target element is not focusable by default,
tabindexmust be set to-1. - If the stepper is long, it must scale to mobile screens without overflowing. One way to achieve this is by stacking the steps vertically on smaller screens.
<ol>identifies the stepper as a list of steps and communicates the total number of steps to screen readers.- Step state (completed, current, upcoming) is communicated through icon, font weight and disabled state, not by colour alone.