Processus par étape

Un processus par étape affiche la progression d'une séquence en la divisant en plusieurs étapes logiques et numérotées comme lors d'un processus d'achat.

Règles d’implémentation pour l’accessibilité

Le processus par étape sera balisé avec les balises <nav>...</nav> on ne posera pas d’attribut role="navigation.
Les différentes étapes du processus seront balisées par un liste ordonnée (l’ordre ayant de l’importance) <ol><li>...</li></ol>
L’étape en cours sera balisée avec l’attribut aria-current="step"
Un retour arrière sera proposé via un lien sur les étapes précédentes.

Visuel

Extraits de code

Code HTML

<nav class="stepper" aria-label="Étapes de votre commande" class="stepper">
     <ol>
          <li><a href="..." title="1. Identification">Identification</a></li>
          <li aria-current="step"><span>Panier</span></li>
          <li><span>Livraison</span></li>
          <li><span>Paiement</span></li>
          <li><span>Fin</span></li>
     </ol>
</nav>


<nav aria-label="Étapes de la démarche" class="stepper">
     <ol>
          <li><span>Identification</span></li>
          <li aria-current="step"><span>Recherche</span></li>
          <li><span>Téléchargement</span></li>
     </ol>
</nav>

Code CSS

@charset "UTF-8";
:root {
    --stepper-font-size: 0.875rem;
    --stepper-font-weight: 700;
    --stepper-counter: step;
    --stepper-item-padding-y: 7px;
    --stepper-item-bg: #123;
    --stepper-item-active-bg: #456;
    --stepper-item-next-bg: #789;
    --stepper-item-arrow-shape: polygon(0% 0%, 1px 0%, calc(100% - 0.125rem) 50%, 1px 100%, 0% 100%);
    --stepper-link-line-height: 1.1428571429;
    --stepper-link-color: #fff;
    --stepper-link-active-color: #fff;
    --stepper-link-next-color: #000;
    --stepper-link-text-decoration: underline
}

*,
::after,
::before {
    box-sizing: border-box
}
nav {
    margin: 3em 0;
}
.stepper {
    --stepper-item-padding-x: 0;
    --stepper-item-margin-end: 0.125rem;
    --stepper-item-drop-shadow: none;
    --stepper-item-arrow-width: 0;
    --stepper-link-width: 1.25ch;
    --stepper-link-marker: counter(var(--stepper-counter)) " ";
}

@media (min-width:480px) {
    .stepper {
        --stepper-item-padding-x: 0;
        --stepper-item-margin-end: 0;
        --stepper-item-drop-shadow: drop-shadow(0.1875rem 0 0 #fff);
        --stepper-item-arrow-width: 0.8125rem
    }

    .stepper li[aria-current="step"] a {
        --stepper-link-marker: counter(var(--stepper-counter)) ". ";
        max-width: none
    }
}

@media (min-width:480px) and (max-width:1279.98px) {
    .stepper li[aria-current="step"] {
        flex: 4
    }
}

@media (min-width:1280px) {
    .stepper {
        --stepper-link-width: none;
        --stepper-link-marker: counter(var(--stepper-counter)) ". "
    }
}



.stepper ol {
    display: flex;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: var(--stepper-font-size);
    font-weight: var(--stepper-font-weight);
    text-align: center;
    list-style: none;
    counter-reset: var(--stepper-counter)
}

.stepper li {
    position: relative;
    display: flex;
    flex: 1;
    padding: var(--stepper-item-padding-y) var(--stepper-item-padding-x);
    counter-increment: var(--stepper-counter);
    background-color: var(--stepper-item-bg);
    filter: var(--stepper-item-drop-shadow)
}

.stepper li:not(:last-child) {
    margin-right: var(--stepper-item-margin-end)
}

.stepper li:not(:last-child)::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% - 1px);
    z-index: -1;
    width: var(--stepper-item-arrow-width);
    -webkit-clip-path: var(--stepper-item-arrow-shape);
    clip-path: var(--stepper-item-arrow-shape);
    content: "";
    background-color: inherit
}

.stepper li[aria-current="step"] {
    background-color: var(--stepper-item-active-bg)
}

.stepper li[aria-current="step"]~li {
    background-color: var(--stepper-item-next-bg)
}

.stepper li+.stepper li {
    padding-left: var(--stepper-item-arrow-width)
}

.stepper a,
.stepper span {
    flex: 1 0 var(--stepper-link-width);
    max-width: var(--stepper-link-width);
    margin: auto;
    overflow: hidden;
    line-height: var(--stepper-link-line-height);
    color: var(--stepper-link-color);
    text-decoration: none;
    white-space: nowrap;
    outline-offset: 1.25rem
}

.stepper a::before,
.stepper span::before {
    content: var(--stepper-link-marker)
}

.stepper a:focus,
.stepper a:hover,
.stepper span:focus,
.stepper span:hover {
    color: var(--stepper-link-color)
}

.stepper a:hover {
    text-decoration: underline
}

.stepper a:focus {
    -webkit-text-decoration: var(--stepper-link-text-decoration);
    text-decoration: var(--stepper-link-text-decoration);
    outline-offset: 0.3125rem
}

.stepper li[aria-current="step"] a,
.stepper li[aria-current="step"] span {
    color: var(--stepper-link-active-color)
}

.stepper li[aria-current="step"]~li a,
.stepper li[aria-current="step"]~li span {
    color: var(--stepper-link-next-color)
}

.stepper li:first-child {
    z-index: 4
}

.stepper li:nth-child(2) {
    z-index: 3
}

.stepper li:nth-child(3) {
    z-index: 2
}

.stepper li:nth-child(4) {
    z-index: 1
}