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

Guidance on how to use a component.

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

Don’t

Guidance on what to avoid when using a component.

• Don’t use it for single-page tasks where the user can complete the entire action in one view.
• Don’t use it 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.
• Don’t use it for short flows with fewer than 2 steps.
• Don’t use it in overlays and modals where space is limited — it can make the UI feel too packed.

Responsive Behaviour

Guidance on where this component has been used

• 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.