Passer au contenu principal

Balise

Balise dans Storybook

Utilisation​

Présentation​

Une balise est utilisée pour étiqueter et catégoriser des éléments avec des mots-clés descriptifs. Les éléments peuvent avoir une seule balise ou un ensemble de balises.

Les balises permettent une identification rapide, une navigation plus simple et le filtrage d'éléments.

Structure​

Formatage des balises

Les balises comprennent les éléments suivants :

  1. Étiquette : texte qui identifie la balise. Les balises doivent toujours avoir une étiquette. Il peut s'agir de termes de recherche ou de mots-clés.
  2. Icône Fermer : icône sur laquelle l'utilisateur peut cliquer pour supprimer la balise.
  3. Ensemble de balises : groupe de plusieurs balises. Lorsqu'un élément comporte plusieurs balises, cela devient un ensemble de balises.

Meilleures pratiques​

  • Lorsque le contenu est mappé vers plusieurs catégories, vous utilisez des balises pour les différencier.
  • Les étiquettes doivent être courtes pour faciliter la lecture, de préférence un seul mot.
  • Utilisez les balises pour filtrer les données et afficher les éléments d'une catégorie particulière.

Comportements​

États​

Les balises ont les états Activé, Désactivé, Survol, Focus et Actif :

  • Activé : indique à l'utilisateur que l'élément est prêt à interagir (par défaut). Les balises activées ont une couleur d'arrière-plan HEX # F0F3F6.
  • Désactivé : indique à l'utilisateur que l'élément n'est pas interactif. Les balises désactivées ont une couleur d'arrière-plan HEX # F9FAFB.
  • Survol : indique que l'utilisateur a positionné le curseur de la souris sur l'élément (sur ordinateur de bureau uniquement). Lors du survol, la couleur d'arrière-plan des balises est HEX # E1E6EC.
  • Focus : indique que l'utilisateur a mis l'élément en évidence, généralement en utilisant une méthode de saisie comme un clavier ou la souris. Lors de la mise en évidence, la couleur d'arrière-plan des balises est HEX # F0F3F6 et la balise est entourée d'un trait de couleur HEX #A5D7EC.
  • Actif : fournit un commentaire indiquant que l'utilisateur clique ou appuie sur l'élément. Les onglets actifs ont une couleur d'arrière-plan HEX # D1D9E2.

Interactions​

Formatage des balises

Clavier​

Le bouton Fermer est activé par les touches Barre d'espace et Entrée.

Lecteur d'écran​

Lorsque la balise est active, le bouton Fermer (X) de chaque balise inclut l'attribut WAI-ARIA : aria-label="close"

Accessibilité​

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 la balise dans votre application :

  1. Veillez à ce que le texte de la balise soit clair et concis.
  2. N'utilisez pas que la couleur pour différencier les catégories de balises.
  3. Lorsque vous personnalisez les couleurs, veillez à ce que les exigences de contraste minimum soient respectées.