Nouveau Components
Boutons
Un bouton est un élément d’interface utilisateur qui, lorsqu’il est cliqué ou activé, déclenche une action ou un événement, comme l’envoi d’un formulaire, l’ouverture d’un menu ou l’exécution d’une tâche spécifique au sein d’une application ou d’une page web. Les boutons sont essentiels à l’interaction et à la navigation dans les interfaces numériques, car ils permettent aux utilisateurs d’initier diverses fonctions d’un simple clic ou toucher.
Quand l’utiliser
- Initiation d'action : Utiliser principalement des boutons pour initier des actions telles que soumettre des formulaires, ouvrir des modales ou déclencher une fonctionnalité.
- Éléments interactifs : Privilégier les boutons lors de la création d'éléments interactifs qui effectuent une action sur la page actuelle sans naviguer vers une nouvelle page.
Quand ne pas utiliser
- Objectifs de navigation : Évitez d'utiliser des boutons pour naviguer vers d'autres pages ou ressources externes ; privilégiez les liens à la place.
- Actions ambiguës : Ne pas utiliser de boutons si l'action qu'ils déclenchent n'est pas claire ou pourrait prêter à confusion pour l'utilisateur.
Modes d’action
- Interaction avec la souris : Les boutons doivent répondre visuellement aux interactions de la souris, par exemple par des changements de couleur, de nuance ou d'élévation au survol ou au clic.
- Accessibilité au clavier : Assurez-vous que les boutons sont accessibles par navigation au clavier, qu'ils sont focalisables et activables en utilisant respectivement les touches Tab, Espace et Entrée.
- Accessibilité pour les lecteurs d'écran : Les boutons doivent être correctement étiquetés, soit avec un texte visible, soit avec l'attribut aria-label, afin de garantir que les lecteurs d'écran peuvent transmettre leur fonction.
Contenu
- Étiquetage clair et concis : Les étiquettes des boutons doivent être courtes mais suffisamment descriptives pour indiquer clairement l'action qui sera effectuée lorsqu'elles seront cliquées.
- Éviter l'ambiguïté : Évitez les étiquettes vagues ; utilisez des verbes d'action spécifiques comme "Sauvegarder", "Soumettre", "Annuler", etc.
- Utilisation d'icônes : Si vous utilisez des icônes sans texte, assurez-vous qu'elles sont intuitives et accompagnées d'étiquettes accessibles, par exemple à travers l'attribut aria-label.
- Taille et longueur : Concevez le texte du bouton pour qu'il tienne confortablement dans le bouton, en évitant les chevauchements ou la troncature, afin de préserver la clarté et l'attrait visuel.
Sur cette page
Fichiers Figma et ressources
Les designers peuvent importer tous les documents de conception depuis notre dépôt Figma en utilisant le lien fourni ci-dessous. Cela simplifie le processus de conception et garantit un accès facile aux derniers actifs de design pour un flux de travail plus efficace.
N'hésitez pas à utiliser l'affichage du prototype ci-dessous comme exemple pratique et démonstration de la manière dont le composant est censé fonctionner. Cette représentation interactive sert de guide visuel pour vous aider à comprendre la fonctionnalité et le comportement attendus.
Boutons
Conception
Ressources
Icon
Icon
Icon
Icon
primary
primary
primary
primary
Secondary
Secondary
Secondary
Secondary
Tertiary
Tertiary
Tertiary
Tertiary
Prototype
Sur cette page
Mots-clés
- Bouton : Un élément cliquable qui effectue des actions au sein d'une interface numérique.
Répartition des composants
Bouton primaire
- Distinction visuelle : Comme les liens textuels, les boutons primaires se distinguent visuellement du reste du contenu. Cela est réalisé par la taille, la couleur et le style.
- Étiquetage clair : Le but du bouton est communiqué par un texte clair et orienté vers l'action, en évitant les termes ambigus. Dans les situations où des contraintes d'espace ou des considérations de conception empêchent l'inclusion d'une étiquette visuellement explicite, l'attribut aria-label est utilisé pour fournir une description textuelle précise de la fonction du bouton.
Bouton sans libellé avec icône seule
- Clarté de l'icône : Assurez-vous que l'icône utilisée soit universellement reconnue et qu'elle transmette clairement la fonction du bouton.
- Accessibilité : Comme pour les liens composés uniquement d'icônes, les icônes présentes seules dans les boutons sont étiquetées avec aria-hidden='true' et accompagnées d'un aria-label descriptif sur le bouton.
Bouton avec icône et libellé
- Clarté de l'icône : Comme pour le bouton uniquement avec icône, l'icône choisie doit être facilement reconnaissable et représenter de manière claire et sans ambiguïté la fonction du bouton, en complément du texte fourni.
- Accessibilité : En ce qui concerne l'accessibilité, l'icône doit inclure l'attribut aria-hidden="true" pour la masquer des lecteurs d'écran, puisque le texte associé fournit déjà les informations nécessaires.
Bouton désactivé
- Indicateurs visuels : Le bouton désactivé est clairement indiqué par un assombrissement, un changement de couleur ou d'autres indices visuels.
- Aucun retour interactif : Les boutons désactivés ne répondent pas aux événements de survol ou de focus, ce qui confirme leur statut non interactif.
Boutons personnalisés (Incorporation des attributs ARIA pour des objectifs spécifiques)
- Divers éléments HTML sont combinés avec des attributs WAI-ARIA pour créer des boutons à des fins spécifiques.
- L'attribut role="button" est essentiel pour que ces éléments soient reconnus comme des boutons par les technologies d'assistance.
- Cette approche garantit à la fois l'identification visuelle et l'accessibilité pour les lecteurs d'écran.Bien que l'utilisation des attributs ARIA soit efficace, il est généralement recommandé d'utiliser la balise <button> pour créer des boutons. Cela assure une compatibilité plus large et une cohérence à travers différents navigateurs et technologies d'assistance.
| Touche | Fonction |
|---|---|
| Entrée/Espace | Active le bouton et déplace le focus vers le changement de contexte |
| Tab | Lorsque l'élément n'a pas le focus, le focus se déplace vers le bouton |
| Shift + F10 | Ouvre un menu contextuel pour le bouton |