Progress Stepper Accessibility
Best Practices
A progress stepper portrays progress through a sequence of steps. Step titles and any supporting copy must clearly name each step. Do not rely on icon shape or color alone to convey status.
The stepper must expose an accessible name, typically with aria-labelledby referencing a heading (visible or visually hidden) that describes the whole process.
Exactly one step must be marked as current with aria-current="step" on that step’s container. Update this attribute when the active step changes.
Give each step’s status icon an accessible name: in the reference markup, the icon svg uses role="img" and aria-label matching state—for example complete , current , upcoming , or blocked when the attention treatment is used.
Interaction Design
This section provides detailed instructions for how different input types should navigate and operate the pattern.
Keyboard
Progress stepper elements are not interactive by default and therefore should not be keyboard focusable.
If a step is placed within an interactive element (such as a button or link), the interactive element must be keyboard accessible via TAB key.
Screen Reader
A screen reader will announce the stepper as a list along with each step's text and icon aria-label value. The current step will be identified via aria-current="step" .
Separators between steps use role="presentation" and will not be announced.
Pointer
Progress stepper elements are not interactive by default and therefore are not clickable.
If a step is placed within an interactive element (such as a button or link), clicking the step will activate that interactive element.
ARIA Reference
| Attribute | Description |
|---|---|
| aria-labelledby | Applied on the stepper root to reference the id of a heading that names the step sequence. |
| aria-current="step" | Applied on the element that represents the active step. |
| role="list" | Applied on the container that groups all steps. |
| role="listitem" | Applied on each step’s container. |
| role="presentation" | Applied on purely visual separators between steps so they are skipped by assistive technologies. |
| role="img" | Applied on each step status icon svg so the graphic is exposed with a short state label. |
| aria-label | Applied on each step status icon svg . Reference values include complete , current , upcoming , and blocked . |