Passer au contenu principal

Barre de progression simple

Barre de progression simple dans Storybook

Utilisation​

Présentation​

La barre de progression simple indique l’avancement en cours d’une opération système, telle que le chargement, le téléchargement ou la soumission. Elle montre également la progression d’une tâche particulière avant son achèvement.

Quand l'utiliser​

Utilisez une barre de progression pour afficher la progression en cours d’une opération système, telle que le chargement, le téléchargement ou la soumission, en particulier dans les cas suivants :

  • La tâche a progressé de manière mesurable (par exemple, pourcentage d’avancement).
  • La tâche est complexe ou son temps d’attente est long, et les utilisateurs ont besoin d’un retour sur son statut.
  • Vous souhaitez atténuer l’inquiétude des utilisateurs en leur fournissant un retour visuel pendant les longues opérations.

Quand ne pas l'utiliser​

N’utilisez pas de barre de progression dans les scénarios suivants :

  • Pour les tâches très courtes qui ne nécessitent pas de retour détaillé ; utilisez des indicateurs plus simples comme des chargeurs.
  • Pour montrer la progression au fil d’une série d’étapes distinctes (par exemple, remplir un formulaire en plusieurs étapes). Utilisez plutôt la barre de progression des étapes.
  • Pour afficher les étapes et sous-étapes d’une tâche en particulier ou utiliser des icônes personnalisées. Utilisez plutôt la barre de progression des phases.

Formatage​

Structure​

Image représentant la structure d’une barre de progression simple

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

  1. Étiquette : décrit la tâche ou l’opération suivie par la barre de progression.
  2. Valeur numérique : représente l’avancement d’une opération ou d’une tâche système dans la plage de la barre de progression. La valeur numérique est affichée sous forme de fraction ou de pourcentage.
  3. Barre : représente la progression d’une opération ou d’une tâche système en affichant une ligne remplie.

Alignement et placement​

L’étiquette peut apparaître en haut ou en bas de la barre de progression.

Image représentant les options de placement pour l’étiquette de barre de progression simple

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 la barre de progression​

  • Incluez une étiquette de barre de progression pour fournir des informations contextuelles sur l’opération ou la tâche en cours d’exécution. Dans de rares cas où le contexte est suffisant, l’étiquette peut être masquée. Ces barres de progression doivent toujours inclure un attribut aria-label pour qu’elles soient accessibles.
  • L’étiquette de la barre de progression doit être courte et concise. Limitez l’étiquette à quelques mots ou à une seule ligne de texte.
  • 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.

Accessibilité​

La barre de progression simple comprend le rôle WAI-ARIA 'progressbar'. Elle comprend également les attributs WAI-ARIA, aria-valuetext, aria-valuenow, aria-valuemin et aria-valuemax de façon à donner plus de sens aux technologies d’assistance.

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.

Lorsque vous utilisez ce composant dans votre application, assurez-vous que l’étiquette de la barre de progression est significative et concise. Si vous devez masquer l’étiquette, fournissez une propriété d’étiquette et définissez hideLabel sur True. Cette action définit l’attribut aria-label sur l’étiquette.