Nouveau Components
Case à cocher
Une case à cocher est un composant qui permet aux utilisateurs de faire une sélection parmi un ensemble d’options. Généralement présentée sous la forme d’un petit carré, elle peut être cochée (sélectionnée) ou décochée (non sélectionnée). Les cases à cocher sont couramment utilisées dans les formulaires et les paramètres, où les utilisateurs peuvent indiquer leurs choix ou préférences. Elles sont particulièrement utiles pour les options qui ne sont pas exclusives, permettant ainsi de faire plusieurs sélections parmi un groupe d’options. Lorsqu’une case à cocher est sélectionnée, une coche ou un symbole apparaît à l’intérieur de la case, indiquant visuellement le choix de l’utilisateur.
Quand utiliser une case à cocher
- Choix multiples : Utilisez des cases à cocher lorsque vous proposez aux utilisateurs une gamme d'options parmi lesquelles plusieurs choix peuvent être sélectionnés.
- Sélections non exclusives : Employez des cases à cocher dans des scénarios où la sélection d'une option n'exclut pas la possibilité de sélectionner d'autres options.
- Champs de formulaire : Implémentez des cases à cocher dans les formulaires lorsque les utilisateurs doivent spécifier leurs préférences ou leurs choix parmi un ensemble d'options distinctes.
Quand ne pas utiliser une case à cocher
- Choix unique : Évitez d'utiliser des cases à cocher lorsque seule une option peut être sélectionnée parmi un groupe ; utilisez plutôt des boutons radio.
- Décisions binaires : Ne pas utiliser de cases à cocher pour des choix binaires (oui/non, vrai/faux) ; les interrupteurs à bascule sont plus appropriés pour ces scénarios.
Modes d’action
- Interaction avec la souris : Assurez-vous que les cases à cocher répondent aux clics de souris, en changeant d'état de coché à décoché ou inversement.
- Navigation au clavier : Permettez aux utilisateurs de naviguer entre les cases à cocher en utilisant la touche Tab et de les sélectionner en utilisant la barre d'espace ou la touche Entrée.
- Accessibilité pour les lecteurs d'écran : Marquez les cases à cocher avec les rôles et étiquettes ARIA appropriés pour garantir qu'elles soient identifiables et accessibles via les lecteurs d'écran.
Contenu
- Étiquetage clair : Accompagnez chaque case à cocher d'une étiquette claire et concise indiquant ce que représente la sélection de la case.
- Étiquetage de groupe : Lorsque les cases à cocher font partie d'un groupe, fournissez une étiquette descriptive pour l'ensemble du groupe afin d'indiquer la nature des choix.
- Cohérence visuelle : Maintenez une conception cohérente pour les cases à cocher, en veillant à ce qu'elles soient facilement reconnaissables et alignées avec la conception globale du site web ou de l'application.
- Retour immédiat : Assurez-vous que l'état de la case à cocher (cochée/non cochée) soit immédiatement visible et clair pour l'utilisateur.
Mots-clés
- Case à cocher : Un élément d'interface utilisateur permettant de sélectionner plusieurs options parmi un ensemble.
- Formulaire : Une section d'une page web où les utilisateurs saisissent des données et font des sélections.
- ARIA (Accessible Rich Internet Applications) : Un ensemble d'attributs destinés à rendre le contenu web plus accessible aux personnes en situation de handicap.
- Fieldset : Un élément HTML utilisé pour regrouper des éléments liés au sein d'un formulaire.
- Label : Texte associé aux éléments de formulaire, comme les cases à cocher, pour décrire leur fonction.
Répartition des composants
- Élément case à cocher : Le composant fondamental. Il s'agit d'un élément de saisie avec l'attribut type défini sur "checkbox". Chaque case à cocher doit avoir un ID unique pour l'étiquetage.
- Étiquette : Fournit une description textuelle pour chaque case à cocher. Les étiquettes sont associées aux cases à cocher à l'aide de l'attribut for, qui correspond à l'ID de la case à cocher.
- Fieldset et Legend : Sont utilisés pour regrouper des cases à cocher liées. Le fieldset enveloppe le groupe de cases à cocher, et legend fournit un titre ou une description pour le groupe.
- Attributs ARIA : Améliorent l'accessibilité, en particulier pour les lecteurs d'écran. Par exemple, aria-checked peut indiquer l'état de la case à cocher, et role="checkbox" garantit que le rôle correct est transmis aux technologies d'assistance.
- Attribut d'étiquetage : Associez l'étiquette visible à la case à cocher personnalisée en utilisant l'attribut aria-labelledby. Assurez-vous que chaque étiquette ait un ID unique, et attribuez le même ID à l'attribut aria-labelledby de la case à cocher personnalisée.
- Attribut tabindex : L'utilisation de balises HTML non génériques rend par défaut le nouveau composant non opérationnel via le clavier. Par conséquent, l'attribut tabindex="0" est introduit pour le rendre accessible au clavier. De plus, les interactions au clavier sont gérées via la gestion des événements JavaScript.
Accessibilité pour les lecteurs d'écran
- Étiquetage approprié : Assurez-vous que chaque case à cocher ait une étiquette que les lecteurs d'écran peuvent lire. Cela est réalisé en liant l'étiquette à la case à cocher à l'aide de l'attribut for.
- Étiquettes de groupe descriptives : Utilisez les balises <fieldset> et <legend> pour fournir un contexte pour un groupe de cases à cocher. Cela permet aux lecteurs d'écran d'informer les utilisateurs sur la nature des choix disponibles.
- Navigation au clavier : Assurez-vous que les cases à cocher peuvent être atteinte au clavier en utilisant la touche Tab pour déplacer le focus et la touche Barre d'espace ou la touche Entrée pour activer ou désactiver la case.
- Annonces de l'état : Les lecteurs d'écran doivent annoncer l'état de la case à cocher (cochée/non cochée) lorsqu'elle reçoit le focus, permettant à l'utilisateur de savoir si l'option est activée ou non.
- HTML sémantique : Utilisez des éléments HTML standard tels que <input>, <label>, <fieldset> et <legend>, qui sont nativement reconnus par les lecteurs d'écran. L'emploi de ces balises améliore l'accessibilité du formulaire.
| Touche | Fonction |
|---|---|
| Flèches haut/bas | Naviguer vers la case à cocher suivante ou précédente. |
| Entrée / Espace | Changer l'état de la case à cocher (activer ou désactiver). |
La démo en version mobile sera disponible prochainement. Dans l'attente, nous vous invitons à consulter la démo en version Desktop.