Navigation

Dot Stepper

How the Dot Stepper works with a keyboard and assistive tech.

Guidance#

An ordered list named by aria-label, one item per step, the current one with aria-current="step".

Each dot carries hidden text, Step 2 of 4, so the position is read without relying on colour.

The dots are too close together to be 24px targets, so they are not buttons; Back and Next are.

The content that changes with the step is a polite live region.