Skip to Main Content

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

Sélectionnez une case à cocher :

Case à cocher désactivée :

Sélectionnez une case à cocher :

Voici l’emplacement du texte du message d’erreur.

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

Étape 1. Installer

Effectuez la commande suivante pour installer ce composant.

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

Étape 2. Importer

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

import { DsCheckboxModule } from 'ds-checkbox';

D’extrait de code

<div role="group" aria-labelledby="checkbox-names foo">
    <p id="checkbox-names">Select a checkbox:</p>
    <cpc-ds-checkbox 
        *ngFor="let country of countries; let i=index" 
        formArrayName="selectedCountries" 
        id="country_{{i}}" 
        [text]="country.name" 
        [value]="country.value" 
        [checked]="i !== 2 ? false : true" 
        [disabled]="i === 3 ? true : false" 
        (change)="onCheckboxChange($event)">
    </cpc-ds-checkbox> 
    <div id="foo" class="ds-error">You must select an option</div>
</div>
Propriétés
Nom Type Défaut Description
id string checkbox-id

Identifiant de la case à cocher.

L’identifiant est le même que le nom de la case à cocher.

text string Checkbox text here

L’étiquette de la case à cocher.

value string Checkbox value

La valeur de la case à cocher.

checked boolean false

Indiquez que la case est cochée à l’aide de la variable "true" (vrai). Indiquez que la case n’est pas cochée à l’aide de la variable "false" (faux).

disabled boolean false

Désactivez la case à cocher avec la variable "true" (vrai)

Activez la case à cocher avec la variable "false" (faux).

(change) Method  

Appelez une méthode si vous voulez saisir la valeur pour effectuer une action.

(change)="onCheckboxChange($event)"

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

<div role="group" aria-labelledby="checkbox-names fooCheckbox">
  <p class="checkbox" id="checkbox-names">Select a checkbox:</p>
  <div class="checkbox-container">
    <input id="oneCheckbox" class="by-keyboard" type="checkbox">
    <label for="oneCheckbox">One</label>
  </div>
 <div class="checkbox-container">
   <input id="twoCheckbox" class="by-keyboard" type="checkbox">
   <label for="twoCheckbox">Two</label>
  </div>
</div>

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

<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.

Lignes directrices

Interaction avec le clavier

Lorsque la case à cocher est mise en évidence :

  • Barre d’espacement : Modifie l’état de la case à cocher (cochée ou non).
  • Touche de tabulation : La mise en évidence est sur l’élément « ciblable » suivant sur la page.
  • Touches « Maj + Tab » : La mise en évidence est sur l’élément « ciblable » précédent sur la page.

La mise en évidence est toujours sur la case à cocher une fois que son état a changé.

Propriétés ARIA

Le composant de la case à cocher peut avoir les propriétés ARIA suivantes :

  • Rôle d’une case à cocher. Il n’est pas nécessaire d’ajouter l’attribut du rôle si vous utilisez la formule native <input type=”checkbox”/>.
  • La propriété aria-checked est réglée à « true » lorsque cochée et réglée à « false » lorsque non cochée.
  • Le conteneur a le rôle d’un « group » lorsque les cases à cocher sont regroupées.
  • L’étiquette de groupe et le groupe de messages d’erreur sont associés au conteneur à l’aide de la propriété « aria-labelledby ». Cette propriété utilise l'ID de l’étiquette de groupe et le groupe de messages d’erreur comme renseignements.

Test

Au moment de tester une case à cocher, le testeur doit s’assurer de ce qui suit :

  • Le case à cocher est entièrement accessible au moyen du clavier.
  • Les indications concernant les états de survol et de mise en évidence sont claires et bien en vue.
  • Le changement d’état (coché et non coché) est clair et ne dépend pas uniquement de la couleur.
  • La case à cocher n’entraîne pas de changement instantané. L’utilisateur peut examiner le changement et sauvegarder les paramètres avant qu’ils entrent en vigueur.
  • La case à cocher a le rôle d’une « checkbox ».
  • Le lecteur d’écran annonce l’étiquette de la case à cocher, son rôle et son état (coché ou non coché).
  • Pour le groupe de cases à cocher, le lecteur d’écran annonce l’étiquette du groupe et le message d’erreur (le cas échéant) au moment d’entrer dans le groupe.

Contenu connexe