Icône
<gcds-icon>

• GitHub
• Figma

Structure de l’icône

• Une icône est un symbole qui représente visuellement un objet, une action ou une idée.
• 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.