Stepper

The Stepper component has been designed to best meet current accessibility criteria.

Therefore, in order to guarantee the accessibility of the component, please make sure to respect the following rules when integrating the component into your pages:

Always use an aria-label attribute on the .mc-stepper element. This attribute allows you to describe the nature of your Stepper.


<nav class="mc-stepper" aria-label="Delivery mode - current step 3 of 5.">
  <!-- following code here -->
</div>

In order to reduce the number of vocalized elements, you must add the attribute aria-hidden="true" on elements that have only a visual value. This is for example the case of the .mc-stepper__indicator element, which must always have this attribute.


<span class="mc-stepper__indicator" aria-hidden="true">2</span>
<!-- or -->
<div class="mc-stepper__indicator" aria-hidden="true">
  <svg class="mc-stepper__icon">
    <use xlink:href="#icon" />
  </svg>
</div>

The attribute aria-current="step" must always be present on the .mc-stepper__item--current element.


<li class="mc-stepper__item mc-stepper__item--current" aria-current="step">
  <!-- following code here -->
</li>