Stepper
Stepper
Easy to use for everyone
The stepper component is informational and non-interactive, acting as a visual aid to inform the user about their current progress within a form.
For Assistive Technology
The stepper is a visual aid and is non-interactive. It's therefore included in the tab-indexing for keyboard navigation as individual list items, allowing it to be read out by screen readers using the aria-current attribute.
Based on
The stepper component has been based on the following resources:
-
Multi-page Forms , W3C, accessed July 2022. -
Stepbar or multi-step process , Orange, accessed July 2022.
Testing
We've tested this component against WCAG 2.2 Level AA. It's been tested with NVDA and VoiceOver, and several different users with different interaction methods.