Les cases à cocher permettent à l'utilisatrice ou à l'utilisateur de sélectionner une ou plusieurs options dans une liste.

Utilisation

Les cases à cocher sont principalement utilisées dans les listes de données dynamiques ou les formulaires et, permettent aux internautes de raffiner leur recherche en fonction du sujet recherché. Contrairement aux boutons radio, les cases à cocher permettent de sélectionner plusieurs éléments en même temps.

Les résultats correspondant à la sélection des cases à cocher peuvent s'additionner ou se soustraire, selon le cas.

Comportement

Voici différents comportements que doivent avoir les cases à cocher :

• Chaque fois qu'une case est sélectionnée, une étiquette correspondant au libellé de la case doit s'afficher.
• Les cases à cocher peuvent être regroupées dans différentes catégories. Si c'est le cas, chaque catégorie doit avoir un libellé qui la décrit. S'il n'y a qu'une seule catégorie, le libellé « Filtres » est suffisant.
• La sélection d'une nouvelle case à cocher ne désactive jamais le choix effectué précédemment.
• Le libellé de la case à cocher doit toujours se trouver à droite de celle-ci.
• Les options « Aucune de ces réponses », « Je ne sais pas » ou « Autre » doivent toujours être placées en dernier. Si l'option « Autre » est offerte, elle doit être accompagnée d'un champ de texte permettant d'inscrire une précision.

Structure

 

1. Libellé « Filtres »
2. Case à cocher sélectionnée
3. Case à cocher non sélectionnée
4. Étiquette correspondant à la case cochée

États

Les groupes de cases à cocher présentent plusieurs états d'interaction.

État normal

L'état normal indique que l'utilisatrice ou l'utilisateur peut sélectionner la case. C'est l'état qui est généralement affiché par défaut lors du chargement d'une page.

État au survol

Lorsque le curseur survole une case à cocher ou le libellé de celle-ci, il se transforme en main.

État focus

Si l'utilisatrice ou l'utilisateur navigue au moyen du clavier, la case à cocher et son étiquette sont englobées dans l'indicateur de focus.

État sélectionné

Lorsque l'utilisatrice ou l'utilisateur sélectionne une case à cocher, celle-ci devient bleue, et un crochet blanc apparaît à l'intérieur de la case.

Accessibilité

Pour en savoir plus au sujet des normes d'accessibilité relatives aux cases à cocher, consultez la page Cases à cocher – Accessibilité du guide des standards d'interfaces du site Web transactionnel de Revenu Québec.