kit

Steps

Where someone is in a multi-step process, done, current and still to come, across or down, as an ordered list that reads correctly without the visuals.

Tier 1 · CSS only Ordered list (aria-current step) preview

Example

  1. Step oneCompleted
  2. Step twoCompleted
  3. Step threeIn progress
  4. Step fourTo do
  1. Vertical step oneCompleted
  2. Vertical step twoSupporting text for the current step.
  3. Vertical step threeTo do
Show the markup 
<div class="kit-stack demo-fill" data-gap="6">
  <ol class="kit-steps">
    <li data-state="done"><span class="kit-steps-title">Step one</span><span class="kit-steps-hint">Completed</span></li>
    <li data-state="done"><span class="kit-steps-title">Step two</span><span class="kit-steps-hint">Completed</span></li>
    <li data-state="current" aria-current="step"><span class="kit-steps-title">Step three</span><span class="kit-steps-hint">In progress</span></li>
    <li><span class="kit-steps-title">Step four</span><span class="kit-steps-hint">To do</span></li>
  </ol>
  <ol class="kit-steps" data-orientation="vertical">
    <li data-state="done"><span class="kit-steps-title">Vertical step one</span><span class="kit-steps-hint">Completed</span></li>
    <li data-state="current" aria-current="step"><span class="kit-steps-title">Vertical step two</span><span class="kit-steps-hint">Supporting text for the current step.</span></li>
    <li><span class="kit-steps-title">Vertical step three</span><span class="kit-steps-hint">To do</span></li>
  </ol>
</div>

Usage

<ol class="kit-steps">
  <li data-state="done"><span class="kit-steps-title">Account</span><span class="kit-steps-hint">Done</span></li>
  <li data-state="current" aria-current="step"><span class="kit-steps-title">Details</span></li>
  <li><span class="kit-steps-title">Confirm</span></li>
</ol>
Attribute Values Default
data-state (on each step) done, current to come
data-orientation vertical across, stacking on phones

Steps can be links when people may go back to an earlier one. Show the current step's form below; steps are a map, not the controls.

Accessibility

  • It's an ordered list, so screen readers say "3 items" and each step's number. The current step has aria-current="step".
  • Done steps show a tick and the word in the hint, or hidden text ("completed") if there's no hint; state is never colour alone.