Processus par étapes

Les processus par étapes affichent la progression à travers une séquence d'étapes logiques et numérotées.

Qu’est-ce qu’un processus par étapes ?

Les processus par étapes (stepper, en anglais) affichent la progression à travers une séquence d’étapes logiques et numérotées. Ils sont surtout employés pour présenter un processus d’achat ou lors de démarches en ligne nécessitant plusieurs étapes.

Exemple de processus par étape

stepper

Règles d’implémentation d’un processus par étapes

  • Un processus par étapes sera proposé dès lors que plusieurs étapes doivent être impérativement réalisées pour parvenir à une action ultime.
  • La plupart du temps, il sera intégré dans un formulaire.

Règles d’accessibilité du processus par étapes

  • 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.

astuce

Un exemple de processus par étape est disponible dans la rubrique Motifs de conception - Processus par étape.