Checkbox group - Groupe de cases à cocher

Le groupe de cases à cocher permet à l’utilisateur de sélectionner une ou plusieurs options parmi plusieurs choix proposés.

checkbox group- Bandeau

Utilisation recommandée

Utiliser un groupe de cases à cocher lorsque plusieurs réponses peuvent être sélectionnées simultanément.

Exemples :

  • Moyens de contact préférés
  • Types de notifications
  • Centres d'intérêt
  • Documents à fournir
  • Filtres de recherche
Checkbox group - Exemple 1

Utilisation incorrecte

Ne pas utiliser un groupe de cases à cocher lorsque l'utilisateur ne peut sélectionner qu'une seule réponse.

Dans ce cas, utiliser un groupe de radios.

Localisation

Les groupes de cases à cocher sont principalement utilisés dans les formulaires.
Ils peuvent être placés :

  • sur une page ;
  • dans une boîte de dialogue ;
  • dans un panneau latéral.

Ils peuvent également être utilisés dans des interfaces de filtrage ou de paramétrage lorsque plusieurs éléments peuvent être sélectionnés simultanément.

Comportement général

Chaque case à cocher fonctionne indépendamment des autres cases à cocher du groupe.

L'utilisateur peut sélectionner aucune, une ou plusieurs options.

Interaction

L'utilisateur peut sélectionner ou désélectionner une option en cliquant sur la case à cocher ou son libellé.

La sélection ou la désélection d'une option n'a pas d'impact sur les autres options du groupe.

Option “Autre”

L'option “Autre” permet à l'utilisateur de renseigner une valeur qui n'est pas présente parmi les choix proposés.

Elle est recommandée lorsque les options couvrent la majorité des besoins mais ne peuvent être considérées comme exhaustives.

Checkbox group - Option Autre - Exemple

Bonnes pratiques

  • Utiliser l'option “Autre” lorsque la réponse attendue complète ou remplace l'option sélectionnée.
  • Positionner l'option “Autre” en dernière position.
  • Limiter le contenu révélé à une seule question complémentaire.
  • Ne pas utiliser l'option “Autre” pour déclencher une nouvelle série de questions.
  • Ne pas révéler plusieurs champs complémentaires.

Accessibilité

Lorsque l'option “Autre” est sélectionnée :

  • le champ complémentaire apparaît sous l'option sélectionnée ;
  • le champ possède son propre libellé ;
  • le focus est déplacé vers le champ ;
  • le champ devient obligatoire ;
  • le champ est retiré de l'ordre de tabulation lorsqu'il est masqué ;
  • les messages d'erreur sont associés au champ complémentaire.