Hub: index · watch · videos

Cycles theme: DEFAULT, COLOR SAFE, HIGH CONTRAST.

Progress steps (stepper) — demo

This micro-demo compares a visual-only stepper (BEFORE) to a semantic stepper (AFTER). Goal: make “where am I in the flow?” understandable without relying on colour or position.

Note: short note / checklist

BEFORE visual-only

Try keyboard: Tab to “Next step”. Notice how the stepper itself has no label, and the current step is indicated mainly by colour.

Checkout Step 1

Shipping

Enter address and delivery preferences.

Issue: the stepper is not programmatically exposed. A screen reader user may only hear “Step 2” in the header chip, not “Payment (step 2 of 4)”.

AFTER semantic + announced

Semantic stepper: <nav aria-label="Progress"> + ordered list. Current step is marked with aria-current="step". Step changes are announced politely.

Checkout Step 1 of 4

Shipping

Enter address and delivery preferences.

Result: assistive tech can determine which step is current, and users hear “Step 2 of 4: Payment”.