Skip to Main Content

Boutons

Les boutons sont des éléments clés qui permettent aux utilisateurs d’effectuer des actions sur les différentes pages qu’ils parcourent.

Utilisez-les lorsque :

  • L’utilisateur doit lancer une application, déclencher un procédé d’inscription ou soumettre un formulaire.
  • L’utilisateur doit se rendre sur d’autres pages du site Web (par exemple, des articles de soutien ou des blogues).
  • Vous voulez permettre à l’utilisateur de passer à une section de la page (lien d’ancrage) ou de revenir au haut de la page.

Composant interactif

Exemples de codes

Section de base

Veuillez noter que ce composant pourrait nécessiter un élément de style supplémentaire.

Télécharger les fichiers

Angulaire 2

Un bouton d’article angulaire est un <button> natif ou <a> des éléments perfectionnés au moyen d’un style de conception d’article et d’ondulations d’encre.

Veuillez noter que ce composant pourrait nécessiter un élément de style supplémentaire.

Télécharger les fichiers

Mendix

Les boutons sont une fonctionnalité prête à l’emploi.

Pour les utiliser, vous n’avez qu’à sélectionner le gadget logiciel du bouton approprié dans la trousse d’outils à droite.

Il existe deux options de style pour ces boutons : principale et secondaire. Sélectionnez l’option que vous voulez dans le menu déroulant de style de bouton dans la fenêtre de gadgets logiciels.

Le bouton principal est le bouton standard bleu principal et le bouton par défaut est le bouton de style secondaire.

La trousse d’outils Mendix se trouve ici.

Intégration des bibliothèques

Utilisez le code ci-dessous pour ajouter cet élément à votre projet. Téléchargez la dernière version de la bibliothèque pour implémenter facilement notre ensemble complet d’éléments.

Angular HTML

Angular

Étape 1. Installer

Effectuez la commande suivante pour installer ce composant.

npm i [NPM-PLACE-HOLDER]/ds-button

Étape 2. Importer

Importer les éléments suivants dans votre dossier app.module.ts.

import { DsButtonModule } from 'ds-button';

D’extrait de code

Bouton principal 
<cpc-ds-button 
    ariaLabel="Some aria label" 
    (click)="beep()" 
    class='primary-button' 
    body='Primary buttons'>
</cpc-ds-button>
Bouton secondaire
<cpc-ds-button 
 class='secondary-button' 
 body='Secondary button'>
</cpc-ds-button>
Bouton de microaction 
<div>
    <a 
    role="button" 
    aria-label="Microaction button focus (copy)" 
    class="micro-buttons copy" 
    href="http://msn.com" 
    target="_blank">LINK MSN</a>
</div>
Propriétés
Nom Type Défaut Description
class string primary-button

Trois classes sont disponibles :

  • Bouton principal
  • Bouton secondaire
  • Microboutons

Exemple de microbouton :


a[role='button'].YOUR_CLASS:before {
  content: url('assets/img/icons/YOUR_ICON.svg');
  position: relative;
  padding-right: 10px;
  display: inline-block;
  top: 3px;
}
body string Text for button

Du texte peut être utilisé. Les services linguistiques traiteront le texte en anglais ou en français.
type
  • button
  • link
  • submit
  • reset
 button  
ariaLabel string  

Configurer pour l’accessibilité au besoin.
(click) Method  

(click)="beep()"

HTML

Étape 1: Importer CSS

Importez l’URL suivante dans votre thème ou votre page.

<link type="text/css" href="[CSS-PLACE-HOLDER]" rel="stylesheet">

Étape 2 : Importer le fichier JavaScript et initialiser le composant

<script src="[JS-PLACE-HOLDER]"></script>

D’extrait de code

Bouton principal
<button class="primary-button by-keyboard">Bouton principal</button>

D’extrait de code

Bouton secondaire
<button class="secondary-button by-keyboard">Secondary Button</button>
Bouton Submit
<input 
  type="submit"
  value="Submit Button"
  class="button primary-button by-keyboard">
Bouton de microaction
<a 
  role="button" 
  class="micro-buttons copy by-keyboard"
  href=http://google.com
  target="_blank"
  aria-label="Microaction button focus (opens in a new window)">
  Microaction button focus
</a>
Bouton du groupe
<div class="btn-group">
  <button 
   type="button" 
   class="button primary-button by-keyboard">
    Group 1
  </button>
  <button 
   type="button" 
   class="button primary-button by-keyboard">
    Group 2
  </button>
  <button 
   type="button" 
   class="button primary-button by-keyboard">
    Group 3
   </button>
</div>

Interaction

Un bouton est un élément de l’interface utilisateur qui permet aux utilisateurs d’effectuer une action préétablie. Il est composé d’un seul élément, habituellement une zone rectangulaire avec une étiquette de texte. Un bouton peut être un élément autonome ou faire partie d’un groupe.

Les boutons peuvent avoir les états suivants :

  1. Défaut : Dans cet état, le bouton est cliquable et déclenchera l’action souhaitée.
  2. Sélectionné : Cet état est rarement utilisé, mais il peut être appliqué pour faire part à l’utilisateur de ses progrès ou de l’état du système.
  3. Désactivé : Dans cet état, le bouton ne peut pas être cliqué. Alors que les boutons désactivés indiquent aux utilisateurs voyants quelles actions peuvent être effectuées sur la page, il faut savoir que ces boutons ne sont pas annoncés par une technologie d’assistance (TA).
  4. Affichage lors du passage du curseur de la souris : Cet état informe l’utilisateur qu’un bouton est cliquable.
  5. Erreur : Cet état est rarement utilisé, mais dans certains cas, un message d’erreur peut être affiché à côté d’un bouton.

Types de boutons

Nous avons un système de boutons différents qui peuvent aider à classer les actions en ordre de priorité :

Boutons principaux « remplis »

Les boutons principaux « remplis » attirent l’attention de l’utilisateur sur votre appel à l’action principal. Ils se démarquent sur une page en raison de leur couleur contrastée lorsqu’ils sont placés stratégiquement sur un écran chargé.

Primary buttons

Boutons secondaires « fantômes »

Les boutons « fantômes » sont moins visibles. Utilisez-les lorsque les utilisateurs peuvent effectuer une action secondaire moins importante que l’action principale. Leur arrière-plan n’est pas rempli et ils ont une mince bordure colorée.


Les boutons secondaires « fantômes » peuvent être affichés à côté d’un bouton principal rempli ou de manière autonome. Gardez à l’esprit qu’un appel à l’action secondaire peut influencer la décision des utilisateurs. Il faut donc se demander si un bouton secondaire est réellement nécessaire.

Secondary buttons

Bouton désactivé

Les utilisateurs qui utilisent une TA ne sauront pas qu’il y a un bouton désactivé sur la page. Il est important d’en tenir compte si vous décidez d’utiliser un bouton désactivé, puisque cela a également une incidence sur la possibilité pour l’utilisateur d’être averti d’une erreur.


Examinez les scénarios qui suivent :


Scénario 1 :
Un bouton permet de soumettre un formulaire sur une page ou dans une fenêtre modale comportant des contrôles de formulaires multiples. Dans ce cas, n’utilisez pas un bouton désactivé à titre d’appel à l’action.


Si un utilisateur de TA passe outre un champ de saisie pendant qu’il remplit le formulaire, il ne sera pas averti de l’erreur. L’utilisateur devra alors conclure que quelque chose ne va pas et devra trouver l’erreur par lui-même.


Garder le bouton actif et l’utiliser pour déclencher un message d’erreur pour les utilisateurs de TA utilisant ARIA est une meilleure solution. Ce message d’erreur peut énumérer les erreurs figurant sur le formulaire et inclure des liens de raccourcis vers chaque commande du formulaire devant être corrigée. Ce message ne sera pas affiché à l’écran, puisque les contrôles du formulaire afficheront chaque message d’erreur individuel pour les utilisateurs voyants.


Vous pouvez en apprendre davantage au sujet de cette technique.


Exemple :
Dans le formulaire de droits de douane et taxes, pour accepter les modalités, si l’utilisateur clique sur le bouton « Continuer » sans remplir le champ ou sans cocher la case, alors :


Le champ du courriel et la case à cocher comprendront une bordure rouge et un message d’erreur. Si un utilisateur utilise une TA, il entendra le message d’erreur qui suit :


Le formulaire que vous avez soumis contient 2 erreurs. Vérifier les renseignements.


Si un utilisateur clique sur « Vérifier les renseignements », la TA lira la liste qui suit :


  • Saisissez une adresse électronique valide. Aller au champ de l’adresse électronique.
  • Sélectionnez la case à cocher pour accepter les modalités. Aller à la case à cocher.

Si l’utilisateur clique sur « Aller au champ de l’adresse électronique », il passera au champ, et s’il clique sur « Aller à la case à cocher », il passera à la case à cocher.

Scenario 1

Scénario 2 :
Un bouton est utilisé pour remplir un formulaire sur une page ne comportant qu’une commande de formulaire. Dans ce cas, n’utilisez pas un bouton désactivé.


Si une erreur se produit, un utilisateur de TA pourrait utiliser le bouton de tabulation pour se déplacer sur la page et ne pas voir l’état d’erreur de la commande du formulaire. Par tabulation, il passera outre le bouton désactivé et il sera dirigé vers d’autres liens ou éléments interactifs figurant sur la page.


Exemple :
Il y a un champ pour saisir le numéro de repérage sur la page de l’outil de repérage. Si un utilisateur, par tabulation, passe outre le champ et que le bouton « Repérer » demeure désactivé, l’utilisateur sera dirigé vers la section du soutien, suivie d’une annonce puis de liens de bas de page.

Scenario 2

Scénario 3 :
Un bouton permet de remplir un formulaire dans une fenêtre modale ne comportant qu’une commande de formulaire. Dans ce cas, vous pouvez utiliser un bouton désactivé à titre d’appel à l’action.


Si un utilisateur commet une erreur, il lui sera facile de la repérer et de la corriger. Si elle est conçue de façon appropriée, la fenêtre modale ne permettra pas à l’utilisateur d’en sortir lorsqu’il appuiera sur la touche de tabulation. L’utilisateur ne se perdra donc pas en recherchant l’erreur.


Exemple :
Dans la fenêtre modale de confirmation de paiement par courriel, si un utilisateur passe outre le champ de l’adresse courriel par tabulation, il n’aura pas d’autre possibilité que de fermer la fenêtre (icône « X »). Si l’utilisateur appuie encore une fois sur la touche de tabulation, il sera alors ramené au champ de l’adresse courriel.

Scenario 3

Liens

Les liens sont des composantes textes interactives (texte de lien) qui peuvent être situées dans le corps du texte ou être utilisées de manière autonome comme élément de navigation. Le texte cliquable est affiché en bleu pour que l’utilisateur sache qu’une action peut être prise.


Les liens peuvent également révéler d’autres sections de renseignements. Parmi les exemples, on retrouve « Afficher plus » et « Afficher tout ».


Les liens ne doivent pas figurer à côté de boutons principaux ou secondaires ni être utilisés à titre de substituts pour des boutons secondaires.

Links

Boutons de microactions

Les boutons de microactions communiquent les résultats d’une action (comme cliquer sur un bouton) à un utilisateur. Ils sont composés d’icônes et de mots choisis dans des combinaisons conçues par l’équipe de l’expérience utilisateur. Utilisez-les comme des icônes seulement, ou sous la forme d’une combinaison d’une icône et de mots.


Utilisez les boutons de microactions dans les produits et les outils de Postes Canada, et non à des fins de marketing sur le site Web. Les microactions ont différentes fonctions. Ils permettent aux utilisateurs :

  • d’activer ou de désactiver des fonctions;
  • d’ajouter un commentaire;
  • de modifier leurs paramètres;
  • de voir un message d’avis;
  • d’interagir avec un champ de données;
  • de partager ou d’aimer du contenu sur les médias sociaux.
Microinteraction buttons

Emplacement

Les utilisateurs lisent le contenu selon deux parcours distincts : F et Z. Lorsqu’une page comporte beaucoup de contenu, les utilisateurs ont une lecture en F, c’est-à-dire qu’ils lisent la partie gauche de haut en bas et la partie supérieure de gauche à droite. Lorsque le contenu est épars ou présenté dans des colonnes, les utilisateurs ont une lecture en Z, c’est-à-dire qu’ils lisent la partie supérieure de gauche à droite, le centre en diagonale, puis la partie inférieure de gauche à droite. Placez les boutons là où un utilisateur peut les voir en fonction du mode de lecture de la page.
  • Dans la plupart des cas, une page devrait comporter un bouton principal bien placé pour éviter toute confusion.

Choisir le bon bouton

Au moment de choisir un bouton, posez-vous les questions suivantes :
  • Quel est l’objectif principal de l’utilisateur?
  • Qu’est-ce que l’utilisateur peut faire d’autre?
  • Quel est le contexte de l’interface utilisateur?
  • Quel est le degré de complexité de la disposition?

Message de rétroaction

Dans certains cas, on veut que l’utilisateur soit informé de la réussite de son action une fois qu’il a cliqué sur un bouton. Il saura ainsi s’il doit faire autre chose. Voici un exemple : « Vous êtes maintenant inscrit au bulletin de nouvelles de Postes Canada ».
  • Le message de rétroaction peut être affiché à titre d’avis ou dans une fenêtre modale, selon son emplacement dans l’interface.
Dans le cas d’une modification entraînant une suppression, un message comme « Êtes-vous certain? Oui ou non? » peut s’afficher lorsque l’utilisateur clique ou appuie sur un bouton, ce qui prévient les suppressions ou les annulations accidentelles.
Lignes directrices générales À faire et à ne pas faire Questions d’accessibilité

Lignes directrices générales

Les recherches démontrent que notre choix de mots a une incidence sur le comportement des utilisateurs. Le bon texte peut aider à convaincre un utilisateur de soumettre un formulaire ou de cliquer pour en apprendre davantage sur nos produits.

  Lignes directrices Exemples
Longueur recommandée Jusqu’à 3 mots ou 22 caractères Nous appeler
Saut de ligne À éviter Repérer un autre article
Formulation Commencer par un verbe Obtenir l’itinéraire
Majuscule Majuscule en début de phrase, sans point Copier le lien

À faire et à ne pas faire

Longueur

Soyez précis et persuasif sur l’action du bouton, tout en vous assurant qu’il est court et concis. Visez un maximum de 3 mots ou de 22 caractères. Veuillez noter que les traductions en français sont souvent 1,5 fois plus longues que le contenu en anglais.

  • Ajouter une adresse
  • Ajouter

Formulation

Commencez par un verbe descriptif qui énonce clairement le résultat.
  • Retour au profil
  • Profil

En-têtes subséquents

Le texte du bouton doit correspondre à l’en-tête de la page ou de la fenêtre modale liée qui s’affiche une fois que l’utilisateur a cliqué.

  • Bouton : Ajouter une description
  • En-tête subséquent : Ajouter une description
  • Bouton : Ajouter une description
  • En-tête subséquent : Numéro de repérage

Noms de marque

Faites attention à l’utilisation des noms de marque dans le texte des boutons. Les utilisateurs ne les connaissent pas toujours et pourraient éviter d’utiliser le bouton. Vous pouvez faire une exception si le bouton figure sur des pages plus spécialisées du site Web, et que vous considérez que l’utilisateur connaît le terme.
  • Commencer à expédier
  • Utiliser Colis clic

Questions d’accessibilité

Messages d’erreur accessibles

Les boutons doivent être activés même s’il manque des renseignements dans les formulaires. De cette façon, lorsqu’un utilisateur sélectionne un bouton pour réaliser une action, un message d’erreur s’affichera pour l’aider à voir ce qu’il a manqué et ce qu’il doit corriger. Utilisez les messages d’erreur accessibles qui dirigent l’utilisateur vers les entrées correspondantes. S’il y a plusieurs erreurs, ajoutez un aperçu des messages d’erreur qui mènera l’utilisateur aux erreurs.

Aperçu du message d’erreur accessible

 

Message d’erreur accessible

Suggestions de lecture supplémentaire :

Concepteurs

Typographie
Trousse de design graphique

Développeurs

Listes
Cadriciel Foundation (en anglais seulement)Ouvre dans un nouvel onglet
Accessibilité

Auteurs

Grammaire et structure
Voix et ton
Organisation du contenu

Boutons de microactions

Ajoutez le texte à côté des microactions pour communiquer à l’utilisateur le résultat obtenu. Dans les cas où les microactions doivent rester sous la forme d’icônes, assurez-vous que le texte de remplacement décrit leurs fonctions.

Microactions avec texte visible

  • Ajouter, calendrier, copier, supprimer, rétroaction, sauvegarder, rechercher
 

Microactions avec texte de remplacement

  • Fermer

Texte de remplacement personnalisé

La fonction d’une microaction placée à côté d’un article pourrait ne pas être claire pour les utilisateurs qui utilisent la technologie d’assistance. Ajoutez un texte de remplacement personnalisé lorsque les microactions correspondent à des articles précis. Cette mesure est particulièrement utile dans les graphiques qui peuvent être difficiles à visualiser.

Texte de remplacement personnalisé pour une microaction

  • Supprimer l’article 8524303909315109 des articles récemment repérés

Lignes directrices

Interaction avec le clavier

Lorsque la cible de saisie d’un bouton est mise en évidence, la barre d’espacement ou la touche Entrée doit activer le bouton.

Points à retenir lorsque la touche Entrée active un bouton :

  • La mise en évidence doit être réglée en fonction du type d’action exécutée par le bouton.
  • Si l’activation du bouton ne modifie pas le contexte affiché, la cible de saisie du bouton restera généralement mise en évidence après son activation. Prenons l’exemple d’un bouton « Appliquer » :
  • Si l’action du bouton indique un changement de contexte, comme l’ajout d’un autre critère de recherche, le point de départ de cette action sera mis en évidence.

Ajout d’un contexte supplémentaire

Parfois, le texte du bouton ne fournit pas suffisamment de contexte. Par exemple, un tableau peut avoir une colonne de plusieurs boutons « Sélectionner » permettant de sélectionner la rangée correspondante. Dans de tels cas, on peut fournir un autre contexte masqué au texte du bouton.

Vous pouvez ajouter un autre contexte masqué au texte du bouton de l’une des façons suivantes :

  • Configurez l’attribut « aria-describedby » de l’intitulé du bouton en fonction de l’identifiant de l’élément qui contient la description. Ne le faites que si une description de la fonction du bouton est présente.
  • Joignez du texte contextuel à l’intitulé du bouton à l’aide d’une classe CSS « sr-only » (lecteur d’écran seulement).
  • Joindre un attribut aria-label contenant les renseignements contextuels au bouton.

Texte du bouton de microaction

Lorsqu’un bouton de microaction est présenté sans étiquette, vous devez inclure du texte hors écran pour les utilisateurs non voyants afin de les aider à comprendre ce que fait le bouton.

Test

Au moment de tester un bouton, le testeur doit s’assurer de ce qui suit :

  • Est entièrement accessible au moyen du clavier.
  • Les indications concernant l’effet de survol et la mise en évidence des cibles de saisie sont claires et bien en vue.
  • Le bouton accomplit correctement sa fonction prévue.
  • Le bouton a le rôle d’un « button » (role="button").
  • Le lecteur d’écran annonce l’étiquette du bouton et tout contexte supplémentaire (le cas échéant).

Contenu connexe