Indicateur d’étapes
L’indicateur d’étapes est un composant visuel permettant de représenter la progression d’un utilisateur au sein d’un processus en plusieurs étapes. Il favorise l’orientation et la compréhension du parcours, notamment dans les formulaires ou les demandes en ligne.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Quand l’utiliser
L’indicateur d’étapes est utilisé :
- Pour structurer un formulaire complexe réparti sur plusieurs pages.
- Pour aider l’utilisateur à situer sa progression dans le parcours.
- Pour réduire la charge cognitive en rendant l’enchaînement des étapes prévisible.
Il est à privilégier lorsque le processus peut être représenté en 5 à 7 étapes principales maximum.
Quand ne pas l’utiliser
L’indicateur d’étapes ne devrait pas être utilisé :
- Pour un processus très court (ex. : renouvellement de mot de passe).
- Si plus de 7 éléments sont visibles en même temps : l’indicateur perd en lisibilité et doit être remplacé par une structuration sans indicateur d’étapes ou une autre conception.
- Lorsque les écrans sont déterminés dynamiquement (simulateurs ou parcours conditionnels) ou si la structure varie selon les réponses, rendant la progression instable (ex. : passer soudainement de 5 étapes à 12 étapes).
- Dans des contextes sensibles (plaintes, signalements) où une interface minimaliste est préférable.
Lorsque la mise en œuvre du composant est techniquement impossible ou qu’elle surcharge l’interface, on peut recourir à d’autres méthodes accessibles pour signaler la progression, telles que décrites dans ce tutoriel du W3C (en anglais seulement).
Anatomie
- Informations d’avancement
- Libellé de l’étape actuelle
- Libellé de l’étape suivante
- Lien d’affichage/masquage des étapes
- Liste des étapes et sous-étapes
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Informations d’avancement
Les informations d’avancement sont composées de deux éléments : le libellé textuel et la barre de progression visuelle.
Le libellé textuel affiche la progression de l’utilisateur à travers les étapes, par exemple : « Étape 2 sur 5 ».
La barre de progression illustre visuellement l’état des étapes : le bleu indique l’étape en cours, le vert les étapes complétées et le gris celles à venir.
Libellé des étapes (actuelle, suivante ou liste numérotée des étapes)
Le libellé doit être explicite et cohérent avec les titres de page ou de section. Il doit reprendre l’idée principale du titre de niveau 1, sous une forme plus concise si nécessaire.
Autrement, le libellé doit être clair, concis et représentatif de l’objectif de l’étape. Par exemple : « Renseignements sur le propriétaire ».
Libellé de l’étape suivante
S’affiche en dessous du libellé de l’étape actuelle avec la mention : « Suivante : [libellé de l’étape suivante] ».
Cette indication aide les usagers à anticiper ce qu’on leur demandera ensuite. Elle améliore la compréhension du parcours et diminue l’anxiété liée à la complexité du formulaire.
Lien d’affichage/masquage des étapes
Le libellé du lien doit être explicite, par exemple : « Voir les étapes » ou « Masquer les étapes ».
Liste des étapes et sous-étapes
La numérotation est continue et sert à éviter la confusion.
Le nombre d’étapes doit refléter la complexité réelle du formulaire sans surcharger l’utilisateur :
- Étapes : Limiter à 5 à 7 étapes visibles. Regrouper ou masquer les étapes supplémentaires si nécessaire.
- Sous-étapes : Les sous-étapes ajoutent de la complexité et peuvent nuire à l’accessibilité. Leur usage doit rester exceptionnel. Elles ne sont utiles que si elles regroupent clairement du contenu lié, dans un long formulaire bien structuré. Afficher au plus 5 à 7 sous-étapes à la fois. Opter pour une autre structure si le contenu dépasse ce seuil.
Indicateur avec sous-étapes – à utiliser seulement pour structurer des formulaires longs et bien organisés.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 27 janvier 2026