Stepper Horizontal
Displays progress through a sequential multi-step process with a horizontal step indicator.
Keyboard interaction
| Key | Action |
|---|---|
| Tab | Moves focus through interactive step elements if the stepper contains focusable content. |
Screen reader behaviour
| Attribute / Property | Value / Behaviour |
|---|---|
role="list" | Stepper wrapper — Groups the steps as a list for screen readers. |
aria-label="Progress" | Stepper wrapper — Provides an accessible name for the list. |
role="listitem" | Each step — Identifies each step as a list item. |
aria-current="step" | Active step — Indicates the currently active step to assistive technologies. |
WCAG 2.2 compliance
1.3.1 Info and Relationships — APass
role="list" on the wrapper and role="listitem" on each step convey the ordered step structure. aria-current="step" marks the active step for assistive technologies.
1.4.3 Contrast (Minimum) — AAPass
Step label text uses --diwa-text-primary; meets the 4.5:1 minimum contrast ratio against the stepper background in both themes.
2.1.1 Keyboard — APass
The stepper itself is a display-only progress indicator. Any interactive step content follows its own keyboard patterns.
1.4.11 Non-text Contrast — AAPass
Step indicator circles use --diwa-accent and --diwa-border, validated to have ≥ 3:1 contrast against adjacent surface colours.
4.1.2 Name, Role, Value — APass
role="list", role="listitem", and aria-current="step" are applied automatically. The aria-label="Progress" landmark names the stepper.
Best practices
- Reduced motion — all CSS transitions inside the shadow DOM respond to
prefers-reduced-motion: reduceand are suppressed automatically. - Meaningful step labels — always provide concise, descriptive step labels. Screen reader users hear the full list of steps when the stepper enters the accessibility tree; vague labels like "Step 1" are not informative.
- Active step synchronisation — always keep the
current-stepprop in sync with the user's actual progress soaria-current="step"accurately reflects the current position.