Stepper - Intelligence Community Design System

Skip to page content

Show navigation section

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.

Last reviewed 15 April 2024 .