Passer au contenu principal

Barre de progression des étapes

Barre de progression des étapes dans Storybook

Utilisation​

Présentation​

La barre de progression des étapes affiche le nombre d’étapes qu’un utilisateur doit effectuer pour terminer une tâche. Par exemple, pour remplir un profil, un utilisateur doit fournir des informations telles que ses qualifications et les détails de son domicile. Ces étapes peuvent être définies comme obligatoires avant que la tâche ne soit considérée comme terminée.

Quand l'utiliser​

Pour afficher le nombre d’étapes nécessaires à la réalisation d’une tâche.

Quand ne pas l'utiliser​

Formatage​

Structure​

Image illustrant la structure d’une barre de progression des étapes

La barre de progression des étapes se compose des éléments suivants :

  1. Icône ou numéro d’étape : indique si une étape est terminée, en cours ou en attente.
  2. Barre : indique le lien entre les étapes tout en affichant les étapes terminées et l’étape en cours.
  3. Étiquette d’étape : établit le contexte et communique ce que l’utilisateur accomplira à chaque étape (par exemple, « Soumettre un paiement »).

Meilleures pratiques​

  • Assurez-vous que les étapes apparaissent dans un ordre logique, du début à la fin (de gauche à droite).
  • Les utilisateurs doivent pouvoir revenir aux étapes précédentes afin de les passer de nouveau en revue et de mettre à jour les détails.
  • Veillez à ce que les étapes soient regroupées de manière logique, simples et claires pour faciliter la compréhension.
  • Assurez-vous que toutes les étapes sont visibles.
  • Limitez le nombre d'étapes à un minimum de 3 et à un maximum de 7.

Contenu​

Directives générales relatives à la rédaction​

  • Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
  • Utilisez des verbes au présent et la forme active dans la plupart des cas.
  • Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
  • Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
  • Utilisez des termes et des phrases concis.

Étiquette de présentation des étapes​

  • Veillez à ce que les libellés restent courts et qu'ils identifient clairement l'étape.
  • Mettez une majuscule initiale aux étiquettes. Mettez une majuscule au premier mot d’une phrase et aux noms propres. Pour obtenir des instructions supplémentaires sur l'utilisation des majuscules en début de phrase, reportez-vous à Usage des majuscules.
  • Lorsque vous utilisez des infobulles en lien avec une mise en page d’étapes, leur contenu ne doit se composer que d’un mot ou deux.

Interactions​

Clavier​

Chaque étape active est accessible à partir du clavier.

Accessibilité​

La présentation des étapes comprend une série d’étapes afin d’informer les utilisateurs du statut d'achèvement. Elle utilise la balise de repérage HTML5 <nav> et chaque étape du processus se voit attribuer le rôle WAI-ARIA 'link'. La valeur textuelle visuelle est également incluse dans un attribut aria-label.

Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :

  • Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
  • Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
  • Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
  • Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.

La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.

Si vous utilisez des liens, assurez-vous que chaque étape oriente l'utilisateur dans la bonne destination.