Dot Stepper

How the Dot Stepper works with a keyboard and assistive tech, and where it stands against WCAG 2.2 AA.

FreeReact and Vue

AAWCAG 2.2 target

3keyboard interactions

The Dot Stepper only shows where you are; it is not a control. It is an ordered list with the current step marked, and the Back and Next buttons beside it do the moving. It is held to WCAG 2.2 AA, which its resting dots don't yet meet.

Keyboard#

Tab

Skips the dots, which are not focusable, and moves to the Back and Next buttons beside them.

Enter

On Back or Next, moves one step. The dots and the hidden step text update.

Space

On Back or Next, moves one step when the key is released.

Semantics#

<ol aria-label="Progress">

An ordered list, one item per step, named by ariaLabel. Name it for the sequence, such as Onboarding steps.

Always

aria-current="step"

Announced as the current step.

Current dot

Step 2 of 4

Visually hidden text in every item, so position and total are read without relying on colour.

Each dot

aria-live="polite"

The content that changes with the step is a polite live region, so a move is announced without stealing focus.

Content

<button>

The controls are ordinary buttons with visible labels, or aria-labels when they are icon-only. Disable Back on the first step.

Back, Next

Colour contrast#

Every variant and state has to meet WCAG 2.2 Level AA. Measure the colours as they land on screen: a translucent hover or press wash over whatever sits behind it.

3:1

Current dot · Current

#005cf8 on white, 5.40:1, and 4.83:1 against the other dots.

WCAG 1.4.11 Non-text Contrast ↗

3:1

Other dots · Default

The resting dots are #f2f2f2 on white, 1.12:1. They are how a sighted person sees how many steps there are, so they need 3:1, and they fall well short.

WCAG 1.4.11 Non-text Contrast ↗

Not colour alone

Current step · Current

The current dot changes colour only, never size, so the hidden Step n of N text and a visible heading on each step carry the position too.

WCAG 1.4.1 Use of Color ↗WCAG 1.3.1 Info and Relationships ↗

3:1

Focus indicator · Back, Next

The dots take no focus. Back and Next ring in #1a6ef8, 4.54:1 against white.

WCAG 1.4.11 Non-text Contrast ↗WCAG 2.4.13 Focus Appearance ↗

Motion#

The current dot's colour changes over 200ms and at once under prefers-reduced-motion. Dots never grow or slide.
If the content beside it slides between steps, honour prefers-reduced-motion there too and swap it in place.

Checklist#

Darken the resting dots: #f2f2f2 is 1.12:1 on white. #8f8f8f reaches 3.23:1.

Don't make the dots clickable. At 8px and 4px they are far under the 24px target minimum and too close for the spacing exception; Back and Next are the targets.

Name the list for what it counts, and keep two to four steps.

Give each step a visible heading, so the step is not known only from which dot is blue.

When focus is on Next and the last step is reached, move focus to the step's main action rather than leaving it on a disabled button.