Accessibility

The stepper communicates a user’s position within a linear, multi-step flow. It has no dedicated WAI-ARIA APG widget pattern; it is built from native step buttons, and the step in progress is flagged with aria-current="step" — the same convention the WAI-ARIA APG Breadcrumb pattern uses to mark the current location — and it meets WCAG 2.1 AA. An accessible stepper announces which step is active, which are already complete, and where each one sits in the sequence, so a user knows how far they have come and how far is left whether they are looking at it, listening to it, or tabbing through it.

For designers

• Every step state — incomplete, current, and completed — must maintain accessible contrast on every supported surface. Source: WCAG 1.4.3 Contrast (Minimum).
• Progress must never be conveyed by colour or fill alone — pair each state with a shape cue, so the current step carries a heavier border and the completed step a check glyph. Source: WCAG 1.4.1 Use of Color.
• Focus styles must stay visible, meet contrast requirements on every supported surface, and be clearly distinguishable from hover. Source: WCAG 2.4.7 Focus Visible.
• Use semantic colour tokens (e.g. foreground/neutral/default) rather than fixed values, so the component adapts correctly across themes and surfaces.

For developers

Build each step as a native <button> so it is focusable and keyboard-operable without extra scripting — you get Enter / Space activation and the standard focus ring for free — and expose the set as a labelled group (e.g. a <nav> landmark) so assistive-technology users can find and skip the progress region. Everything each step must announce — its role, its accessible name, and whether it is the current or a completed step — is in the Labelling elements section below.

Keyboard interaction

Key	Action
Tab / Shift + Tab	Move to the next / previous step, or the back action
Enter / Space	Activate the focused step

Each step button must be large enough to operate comfortably — at least 24 × 24 px. Source: WCAG 2.5.8 Target Size (Minimum).

Labelling elements

Give every element the role, name, and state assistive technology needs.

Step

A native <button>. Its accessible name comes from the visible step number and label — enrich it with a screen-reader-only “Step N of M” so position is announced, e.g. “Step 2 of 4: Details”. Mark the step in progress with aria-current="step" so assistive tech knows exactly where the user is, and leave it off every other step.

Completed indicator

The check glyph that replaces the number on a finished step needs a text alternative — aria-label="Completed" — with the step number kept in a visually hidden <span class="sr-only">, so the completed state is announced rather than left to the fill colour.

Progression divider

The connector line between steps is purely decorative. Keep it out of the accessibility tree (aria-hidden / presentational) so it adds no noise — progress is already carried by each step’s own state.

Source: WCAG 4.1.2 Name, Role, Value.