Après la théorie, on met les mains dans le code.

Ce que j’ai fait :

• lire les notices Cases à cocher simulées en ARIA(lien externe) et Cases à cocher simulées en CSS(lien externe) d’AcceDe Web
• lire l’article Indeterminate Checkboxes (lien externe) de Chris Coyier

Création de cases à cocher accessibles

J’ai créé un Codepen(lien externe) “bac à sable” me permettant de créer :

• des cases à cocher “double état” simulées en CSS
• une case à cocher “triple état” simulée en ARIA

Les cases à cocher simulées en CSS sont basées sur la notice Cases à cocher simulées en CSS(lien externe) d’AcceDe Web. J’ai modifié légèrement le code initial pour adapter mon propre design de case à cocher.

La case à cocher “triple état” m’a demandé un gros effort niveau Javascript pour parvenir à la faire fonctionner en adéquation avec les autres cases à cocher. Le code Javascript est très brouillon et loin d’être parfait, mais ça fonctionne à peu près normalement.

Test au clavier et navigateur d’écran

Il est possible de naviguer entre les différentes cases à cocher uniquement avec la touche “Tab” et de sélectionner ou dé-sélectionner une case à cocher avec la touche “Espace”. Le fait de cocher ou non les cases à cocher “double état” affecte directement la case à cocher “triple état”.

J’ai testé le rendu avec Orca et Epiphany : la case à cocher simulée en ARIA est correctement restituée, de même que les changements d’état.

Ce que j’ai appris

Il n’existe pas d’attribut “indéterminé” pour signifier l’état partiellement coché d’une case à cocher. En revanche, il est possible de modifier cette propriété en Javascript :

var checkbox = document.getElementById("some-checkbox");
checkbox.indeterminate = true;

Cet état “indéterminé” est uniquement visuel : l’état de la case est toujours “coché” ou “décoché”. Cela signifie que l’état visuel indéterminé masque la valeur réelle de la case à cocher.