Accessibility

Accessibility

For Design

• All states (current, rested, filled) must maintain accessible contrast.
• Focus styles must remain visible and meet WCAG AA contrast requirements. Focus should be clearly distinguishable from hover.
• Colour tokens used should be semantic (e.g. foreground/neutral/default) rather than fixed values, ensuring the component adapts correctly to different themes or surfaces.
• Maintain a minimum 4.5:1 contrast ratio for step indicators and ensure text remains legible at 200% zoom.

For Dev

To ensure the Stepper meets WCAG 2.1 AA and supports assistive technologies, follow these implementation standards:

1. Interactive Target
   • Group the circle and label as a single button or link. The user should only Tab once per step.
2. Semantic Labeling
   • Use aria-labelledby to associate the step number with the label text, or use a single aria-label on the container.
3. State Indicator
   • Use aria-current="step" on the active step so screen reader users know exactly which part of the process they are in (e.g. “Step 1 out of 4: [Label]”).
4. Back Button Assistance
   • If a user navigates back, previously entered data must be persisted. Never clear a form field during a “Back” action.
5. Focus Flow
   • The user focuses on the “Step” and the next press of Tab moves focus directly into the first interactive element of that step’s content.
   • When a step is active, the next focus stop in the tab sequence must be the content area associated with that step.
   • Make sure the Back Button is the first focusable element when moving to step 2.
   • Navigate forward with Tab and backwards with Shift+Tab.

Usage

Do

Use it when a process requires more than 5–6 fields that should be logically grouped, for high-value transactions such as checkouts, insurance applications, or legal forms where the user needs constant reassurance of their progress, and for linear journeys where the sequence of information matters and the user must be guided through a specific path.

Don't

Don’t use it for single-page tasks where the user can complete the entire action in one view, for non-linear processes where the user needs to jump back and forth between sections in any order (a sequential form header would be misleading), for short flows with fewer than 2 steps, or in overlays and modals where space is limited — it can make the UI feel too packed.

Responsive Behaviour

On mobile breakpoints, only the label for the current step is displayed to keep labels readable for longer words; labels for other steps are hidden. On tablet and desktop breakpoints, all step labels are visible.