Icône
<gcds-icon>

Ce composant est en cours de développement.

• GitHub
• Figma

Structure de l’icône

1. Une icône est un symbole qui représente visuellement un objet, une action ou une idée.
2. Le texte d’accompagnement est un mot ou une expression qui donne un contexte supplémentaire.

Design et accessibilité de l’icône

Utiliser l’icône de manière intentionnelle

• Utilisez les icônes pour aider les gens avec la fonctionnalité du site.
• Utilisez les icônes judicieusement, car une utilisation excessive peut distraire et en réduire l’efficacité.

Utiliser une icône avec du texte

• Associez l’icône à du texte d’accompagnement pour éliminer toute ambiguïté.
• Les icônes universellement comprises, comme celle de la recherche, peuvent être utilisées seules.
• Placez une icône avant le texte, à moins que vous n’indiquiez des informations secondaires, comme la flèche d’un menu déroulant.

Rédiger une description significative

• Utilisez du texte d’accompagnement distinct et spécifique afin d’éviter les répétitions pour les lecteurs d’écran.
• Utilisez du texte de remplacement lorsqu’il n’y a pas de texte d’accompagnement.

Faire correspondre l’icône et la taille du texte

• Faites correspondre la taille de l’icône au texte d’accompagnement, c’est-à-dire en utilisant une petite icône avec du petit texte.
• Alignez l’icône de manière à ce qu’elle soit à la même hauteur que le texte d’accompagnement.
• Utilisez notre échelle de taille pour vous assurer que la taille de l’icône correspond à la taille du texte.

Choisir une couleur accessible

• Utilisez une couleur unie qui correspond au texte d’accompagnement.
• Vérifiez que la couleur respecte ou dépasse la norme WCAG 2.1 AA.