Cases à cocher
<gcds-checkboxes>

Autres noms : liste de contrôle, liste de vérification.

Les cases à cocher offrent un ensemble d'options pour les réponses multiples.

• GitHub
• Figma

Structure des cases à cocher

1. La légende pour les cases à cocher agit comme un titre pour identifier les cases à cocher groupées. Le texte de la légende est aligné à gauche avec la première lettre en majuscule. (Ne s'applique que lorsqu'il y a plusieurs options parmi lesquelles choisir.)
2. Le texte explicatif pour les cases à cocher donne des exigences spécifiques pour remplir les cases à cocher avec succès. (Ne s'applique que lorsqu'il y a plusieurs options parmi lesquelles choisir.)
3. La case à cocher permet aux gens de choisir ou de désactiver une option.
4. La cochée est un repère visuel qui indique qu'une option est sélectionnée.
5. L'étiquette de l'option nomme ou décrit l'option.
6. Le texte explicatif de l'option donne plus de renseignements sur l'option correspondante.

Offrir des choix clairs

• Limitez le nombre d'options à 7.
• Limitez le texte de chaque option à quelques mots ou à une phrase courte. Incluez du texte explicatif s'il faut du contexte additionnel.
• Ordonnez les options de manière logique. Par exemple, par ordre alphabétique ou du plus au moins commun.

Fournir des instructions claires

• Ne supposez pas qu'une personne saura comment utiliser une case à cocher.
• Utilisez le texte explicatif pour indiquer que plusieurs sélections sont possibles. Par exemple, « cochez toutes les cases qui s'appliquent ».
• Évitez de présélectionner une case à cocher. Cela augmente les risques que les utilisateur·rice·s sautent une question ou soumettent une mauvaise réponse.

Masquer la légende ou les étiquettes seulement lorsque le but est clair

• Masquez visuellement la légende ou les étiquettes uniquement lorsque le but des cases à cocher est clairement communiqué par le contexte, rendant l’étiquette visuellement redondante, comme dans les cas suivants :
  • tableaux ou autres mises en page où l’espace est limité;
  • paramètres et configurations.
• Fournissez toujours une légende et des étiquettes pour soutenir les technologies d’assistance.
• N’ajoutez pas de texte explicatif si vous masquez la légende, puisque celui-ci manque alors de contexte et peut distraire ou prêter à confusion.