Indicateur d'étapes

L’indicateur d'étape permet d’indiquer à l’utilisateur où il se trouve dans un formulaire ou dans une démarche.

Ce composant est disponible depuis la version 1.6.0
Nous sommes attentifs à vos retours afin de pouvoir apporter des corrections si nécessaire. Soyez vigilant quand à son utilisation en production !


Cet indicateur d'étape est utilisable dans le cas d’un processus linéaire, le composant ne permet pas de naviguer d’une étape à une autre (pour cela, il faudra utiliser des boutons).

 

Structure

L’indicateur d'étape est constitué des éléments suivants :

  • Le numéro de l'étape et le nombre d'étapes total - obligatoire

  • le titre de l'étape en cours - obligatoire

  • la barre de progression - obligatoire

  • le titre de l'étape suivante - obligatoire.

La barre de progression contient autant de sections qu’il y a d'étapes, les étapes validées et l'étape en cours sont en bleu.

Aucun des éléments de l’indicateur d'étape n’est cliquable.

 

1 2 3 4 5 6 7 8 9 10 <div class="fr-stepper"> <h2 class="fr-stepper__title"> <span class="fr-stepper__state">Étape 1 sur 3</span> Titre de l’étape en cours </h2> <div class="fr-stepper__steps" data-fr-current-step="1" data-fr-steps="3"></div> <p class="fr-stepper__details"> <span class="fr-text--bold">Étape suivante :</span> Titre de la prochaine étape </p> </div>

 
À la dernière étape, le titre de l'étape suivante n’est pas à afficher.

1 2 3 4 5 6 7 <div class="fr-stepper"> <h2 class="fr-stepper__title"> <span class="fr-stepper__state">Étape 4 sur 4</span> Titre de la dernière étape en cours </h2> <div class="fr-stepper__steps" data-fr-current-step="4" data-fr-steps="4"></div> </div>

 

Règles d’utilisation

Usages

L’indicateur d'étape ne sert pas à naviguer d’une étape à l’autre, pour cela utiliser des boutons en bas des champs de l'étape.

Il est conseillé de finir par une étape de confirmation. Il est aussi conseillé de créer une page d’introduction à la démarche, avant de commencer cette dernière pour présenter les différentes étapes, sur laquelle ne figure pas cet indicateur d’étapes. Voir le modèle de formulaire (À venir).

Contenus

  • Chaque étape doit avoir un titre clair, unique et ne comprenant pas le numéro de l'étape (car on l’a déjà dans le champ numéro de l'étape).

  • À la dernière étape, le titre de l'étape suivante n’est pas à afficher.

Accessibilité

  • Le titre de l’étape est bien dans un élément <hx>

  • Le numéro de l’étape et le nom de l'étape suivante sont dans des éléments <p>

  • La barre de progression ne nécessite aucune alternative ni attribut aria (car purement illustrative).

Personnalisation

Le style de ce composant n’est pas personnalisable.

 

 

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :