Aller au Contenu Principal

Cases à cocher

Les cases à cocher permettent aux utilisateurs de sélectionner plusieurs options à partir d’une seule liste. Une case à cocher seule permet à l’utilisateur d’activer ou de désactiver une option.

Utilisez-les lorsque :

  • L’utilisateur doit faire un choix ou sélectionner une option.
  • L’utilisateur doit indiquer qu’il a effectué une action obligatoire.

Composant interactif

Select a checkbox:
Disabled checkbox:
Select a checkbox:
Voici l’emplacement du texte du message d’erreur.

Lignes directrices générales

Une case à cocher permet à l’utilisateur de sélectionner des options sans en désélectionner d’autres. Elle comprend une icône de case à cocher et une étiquette décrivant la sélection. Si l’objectif est que l’utilisateur fasse un seul choix, consultez la section sur les boutons radio.

Positionnement

Les cases à cocher sont disposées comme des listes. Les étiquettes des cases à cocher s’affichent toujours à droite de chaque case à cocher.

  • Les cases à cocher doivent être alignées à la verticale. Les cases à cocher disposées à l’horizontale sont difficiles à balayer du regard.

Design réactif

Si le texte d’une case à cocher est long et qu’il risque de passer à la ligne suivante dans les petits écrans, assurez-vous que les autres lignes s’alignent sous la première lettre du texte, et non sous la case à cocher. Lorsque le texte passe à la ligne suivante, alignez les cases à cocher à la verticale avec la première ligne du texte.

Interaction

États

Toute la case à cocher et la zone de l’étiquette sont interactives. Les cases à cocher peuvent avoir les états suivants :

  1. Par défaut :
    dans cet état, une case à cocher peut être sélectionnée en cliquant dessus.
  2. Sélectionnée :
    dans cet état, une case à cocher peut être désélectionnée en cliquant dessus.
  3. Mise en évidence :
    dans cet état, une case à cocher se trouve dans un encadré bleu et peut être activée au moyen de la barre d’espacement. Cet état est essentiel pour les utilisateurs qui ne naviguent pas dans votre design à l’aide d’une souris.
  4. Désactivé :
    Dans l’état désactivé, un menu déroulant est visible, mais il est impossible de l’utiliser. Les couleurs pâles permettent de distinguer les menus déroulants désactivés des menus déroulants activés.

Unselected

Unselected

Selected

Selected

Disabled

Disabled
  • Ne présélectionnez pas une case à cocher, à moins que vous soyez certain que la plupart des utilisateurs feraient cette sélection.

Rétroaction

Messages d’erreur :

Lorsqu’il y a une erreur, le message s’affiche sous la dernière case à cocher.

Messages d’erreur

Facteurs à prendre en compte en matière d’accessibilité

Accessibilité du clavier

Les états de mise en évidence des cases à cocher permettent aux utilisateurs de naviguer sans souris entre les options. Pour fournir de la visibilité et du contexte, l’état de mise en évidence doit couvrir toute la ligne, et non seulement la case à cocher.

L’utilisateur peut naviguer entre les options de cases à cocher à l’aide de la touche de tabulation, et cocher et décocher les cases à l’aide de la barre d’espacement.

Lecteurs d’écran

Les lecteurs d’écran doivent annoncer l’élément comme une case à cocher et l’étiquette qui lui est associée.

Avec le même en-tête, utilisez <jeu de champs> pour regrouper les cases à cocher. Les lecteurs d’écran annonceront le groupe de cases à cocher selon l’étiquette de jeu de champs que vous avez désignée.

  • Bien qu’il ne soit pas nécessaire d’intituler les groupes de cases à cocher à l’aide d’en-têtes ou de texte en gras pour les lecteurs d’écran, rappelez-vous que ces éléments sont particulièrement utiles pour le balayage visuel.

Spécifications du design

Pour toutes les tailles d’écran.

Pour toutes les tailles d’écran.

Lignes directrices générales

Une case à cocher permet à l’utilisateur de sélectionner des options sans en désélectionner d’autres. Elle comprend une case à cocher et une étiquette décrivant la sélection. Si l’objectif est que l’utilisateur fasse un seul choix, consultez la section sur les boutons radio.

Une case à cocher est interactive et permet à l’utilisateur de la sélectionner ou de la désélectionner en un clic. Le contenu s’affiche à la droite de la case à cocher.

Au moment de la rédaction des cases à cocher, les messages d’erreur indiquent à l’utilisateur ce qu’il doit faire pour effectuer la tâche. Le message d’erreur s’affiche sous la dernière case à cocher.

  Lignes directrices Exemples
Longueur recommandée Suffisante pour que l’idée soit claire, mais essayez de vous en tenir à une seule ligne
Saut de ligne Limiter l’utilisation; le texte doit être sur la même ligne que la case et non pas dessous
Formulation Phrases courtes expliquant chaque élément
Majuscule Majuscule en début de phrase

À faire et à ne pas faire

Majuscules et minuscules

Utilisez une majuscule en début de phrase pour faciliter la lisibilité.

Architecture de l’information

Privilégiez des descriptions courtes pour chaque case à cocher; ce sera plus clair et dégagé.

Mots positifs

Utilisez des mots positifs et actifs dans les étiquettes des cases à cocher afin d’expliquer clairement ce qui se produira si l’utilisateur clique sur celles-ci. Évitez les tournures négatives pour les cases d’activation et de désactivation, car elles peuvent confondre l’utilisateur.

Exemples de codes

Section de base

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

Angulaire 2

<mat-checkbox> offre la même fonctionnalité que l’élément <input type="checkbox"> natif perfectionné avec un style de motif d’article et des animations.

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



Mendix

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

Vous n’avez qu’à sélectionner l’option de case à cocher dans la trousse d’outils à droite.

Les styles de cases à cocher devraient être appliqués automatiquement ainsi que les styles de leurs états d’erreur.

La trousse d’outils Mendix se trouve ici.

Meilleures pratiques

  • Une case à cocher permet de sélectionner une valeur ou plus.
  • Chaque case à cocher doit être précédée d’une étiquette ayant une valeur descriptive.
  • Cliquer sur l’étiquette permet de cocher la case associée.

Content...