Live demo: Open the stepper BEFORE/AFTER micro-demo
Common failure modes
- Visual-only state: current step indicated only by colour, shape, or position.
- No label: screen readers don’t learn “Progress” or “Checkout steps”.
- Ambiguous steps: “1 / 4” exists but step names are missing or abbreviated (“S, P, R”).
- Dynamic step changes are silent: content changes but nothing is announced.
Small, reliable pattern
- Wrap the stepper in
<nav aria-label="Progress">(or a specific label like “Checkout progress”). - Use an ordered list (
<ol>) so the sequence is explicit. - Mark the current step with
aria-current="step". - Provide readable text labels (not just icons/initials).
- If step transitions update the page dynamically, announce the change with a polite live region (example: “Step 2 of 4: Payment.”).
- Keep focus stable (often: leave focus on the “Next step” button after loading).
Related micro-demos
- Pagination vs infinite scroll (focus + announcements)
- Loading states (aria-busy + calm status)
- Dialogs (focus management basics)
More from this hub
- Watch page (primary share target)
- Micro-demo backlog