Comment implémenter des cases à cocher personnalisées et accessibles ?

Ce que j’ai fait :

• lire le motif de conception Checkbox(lien externe) des WAI-ARIA Authoring Practices 1.1
• étudier le code de l’exemple de case à cocher à double état proposé sur Checkbox Example (Two State)(lien externe) des WAI-ARIA Authoring Practices 1.1
• étudier le code de l’exemple de case à cocher à triple état proposé sur Checkbox Example (Mixed-State)(lien externe) des WAI-ARIA Authoring Practices 1.1
• regarder la vidéo Accessibilité du Web (5) : Des formulaires accessibles - Accessible forms(lien externe) de TheAccesskey : cette vidéo montre bien les conséquences d’un défaut d’accessibilité sur des cases à cocher

Ce que j’ai appris

Définition

Les cases à cocher sont des éléments de formulaires, permettant à l’internaute d’indiquer des choix : il s’agit d’options, présentées sous la forme de cases, que l’internaute peut sélectionner ou non.

Les WAI-ARIA Authoring Practices 1.1 distinguent deux types de case à cocher :

• les cases à cocher à “double état” : il s’agit du type de case à cocher le plus répandu, l’internaute a le choix entre deux options, coché et non coché.

• les case à cocher à “triple état” : ce type de case à cocher prend en charge un troisième état appelé “partiellement coché”.

La case à cocher à triple état

Je vous invite à regarder l’exemple de cases à cocher à triple état(lien externe) fourni par les WAI-ARIA Authoring Practices 1.1.

Une case “partiellement cochée” est une case globale permettant de représenter le fait que certains de ses sous-éléments sont eux-mêmes cochés, et d’autres non. Lorsque seules certaines options du groupe sont cochées, la case globale est donc représentée comme partiellement cochée.

L’internaute peut utiliser cette case globale pour modifier toutes les options d’un groupe en une seule action :

• cocher la case globale pour sélectionner toutes les options d’un groupe

• décocher la case globale pour ne sélectionner aucune des options d’un groupe

Comportement attendu et interactions clavier

• quand la case à cocher reçoit le focus, appuyer sur le touche “Espace” permet de changer l’état de la checkbox

• la touche “Tab” permet de déplacer le focus sur les différentes cases à cocher

Structure (rôles, propriétés, états)

• la case à cocher doit avoir un rôle role="checkbox"

• la case à cocher possède un nom accessible fourni sous la forme d’un texte contenu dans l’élément ayant pour rôle role="checkbox", ou d’un aria-label, ou d’un aria-labelledby

• la case à cocher doit posséder un attribut aria-checked dont la valeur varie en fonction de l’état de la case à cocher :
  • aria-checked="true" pour une case cochée
  • aria-checked="false" pour une case non cochée
  • aria-checked="mixed" pour une case partiellement cochée

• si plusieurs cases à cocher sont présentées sous la forme d’un groupe avec une étiquette visible, les cases à cocher doivent être incluses dans un élément avec un rôle role="group" ayant pour attribut aria-labelledby, dont l’identifiant pointe sur l’étiquette visible du groupe.

• la propriété aria-describedby doit être utilisée pour donner des indications supplémentaires concernant une case à cocher ou un groupe de case à cocher