Bouton
<gcds-button>

Autres noms : appel à l’action.

Un bouton est un objet interactif qui met l’accent sur une action.

• GitHub
• Figma

Structure du bouton

1. Le conteneur donne au bouton son poids visuel
2. Le libellé indique l’action qui se produira en interagissant avec le bouton. Le texte est en minuscules, seule la lettre initiale est en majuscule.

Accessibilité et design des boutons

Assurez-vous que le bouton est repérable

• Limitez le nombre de boutons par page. N’employez des boutons que pour les actions les plus importantes.
• Placez-les de manière régulière et prévisible.
• Évitez de faire défiler, tabuler ou taper inutilement les gens en indiquant le plus tôt possible le parcours vers la prochaine action.
• Vérifiez la visibilité de la bordure du bouton par rapport à la surface où vous le placez.

Écrivez un libellé de bouton court, spécifique et descriptif

• Rendez l’action du bouton évidente avec un libellé court et précis qui contient un verbe, ou un verbe et un nom, comme « Soumettre » ou « Obtenir une estimation ».
• Utilisez la majuscule initiale.
• Rédigez un texte d’accompagnement unique et précis afin d’éviter la répétition pour les lecteurs d’écran.
• Utilisez des phrases littérales. Évitez d’employer des expressions verbales qui risquent d’être mal comprises par des locuteur·rice·s qui ne parlent pas couramment le français.