Role and semantics
Section titled “Role and semantics”Stepper is an ordered list (ol) inside a nav named “Progress”. The current step has aria-current="step". Each step’s status is added after its name as hidden text: “Details, complete”. Markers and lines have aria-hidden. The “Step 2 of 3: Preferences” line below 640 px is a visual shortcut; the list is read in full.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | With onStepChange, to complete step buttons; then to the WizardFooter buttons. |
| Enter, Space | Returns to a step or runs the button. |
When the step changes, move focus to the new step’s heading; Stepper does not move focus itself.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| List | “Progress, navigation, list, 3 items” |
| Current step | “Preferences, current step, current step” |
| Complete (button) | “Details, complete, button” |
Contrast
Section titled “Contrast”Marker borders and the line have 3:1, names 4.5:1. Status is given by the check and alert icons and text, not colour alone.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Stepper meets it | What product teams must do |
|---|---|---|
| 1.3.1 Info and relationships | An ordered list and aria-current. |
— |
| 1.4.1 Use of colour | Status also shows as an icon and text. | — |
| 2.4.8 Location | “Step 2 of 3” is always visible. | — |
| 3.3.4 Error prevention | Users can go back; there is a review step. | Show a review on the last step. |