In forms with multiple steps, identify the current step using `aria-current="step"`

In the navigation menu of a form with multiple steps, the current step should be identified by means of aria-current="step".

<nav aria-label="Steps of your order">
   <ol>
      <li><a href="…">Personal information</a></li>
      <li aria-current="step"><em>Payment</em></li>
      <li>Preview</li>
   </ol>
</nav>

Note

When forms have multiple steps, it should also be possible for the user to return to a previous step by means of a link, for example.

Find out more

Associated accessibility guideline for the graphic design: 7.11. Provide a way of returning to the previous steps on forms with multiple steps.
Using the aria-current attribute.

Comments

Add a comment