Cases à cocher personnalisées en ARIA

Sommaire

Principe

Les cases à cocher sont des éléments de formulaires qui permettent de sélectionner une ou plusieurs options parmi un groupe d’options proposées.

Les cases à cocher sont dites « personnalisées en ARIA » lorsqu’elles ne sont pas construites sur la base du code HTML standard prévu pour ces éléments par la spécification : <input type="checkbox" />.

Le suivi des recommandations ci-dessous permet de reproduire le comportement par défaut des cases à cocher HTML standards, dans les cas où ces dernières ne peuvent être utilisées.

Cette fiche s’appuie sur le motif de conception « Checkbox » détaillé dans les WAI-ARIA 1.1 Authoring Practices du W3C.

Socle HTML

<p id="question">Question</p>
<ul aria-labelledby="question" role="group">
  <li role="checkbox" aria-checked="false" tabindex="0">
    <img aria-hidden="true" src="checkbox.svg" alt="Non sélectionné : " />
    Choix 1
  </li>
  <li role="checkbox" aria-checked="true" tabindex="0">
    <img aria-hidden="true" src="checkbox-checked.svg" alt="Sélectionné : " />
    Choix 2
  </li>
  <li role="checkbox" aria-checked="false" tabindex="0">
    <img aria-hidden="true" src="checkbox.svg" alt="Non sélectionné : " />
    Choix 3
  </li>
</ul>

Rôles, états et propriétés ARIA

Interactions au clavier

Les interactions au clavier sont les mêmes que pour des cases à cocher HTML classiques. À la seule exception que le focus clavier est ici positionné sur le conteneur de la case à cocher, et non uniquement sur la case à cocher.

Espace

Lorsque le focus clavier est sur le conteneur d’une case à cocher, coche/décoche la case à cocher, alternativement et en boucle.

Tab

Permet d’accéder successivement à chaque case à cocher, avant de sortir du groupe, dans l’ordre logique de lecture.

Maj + Tab

Même comportement qu’avec la touche Tab, mais cette fois dans l’ordre inverse de lecture.

Remarques

La source de l’image, ainsi que son texte alternatif, doivent être modifiés en fonction de l’état de la case à cocher correspondante.

À noter qu’une balise <img /> est proposée dans l’exemple de code, mais qu’il est également possible de la remplacer par une image vectorielle <svg>.

Composants

Ces composants « Cases à cocher personnalisées en ARIA » sont proposés ici car leur niveau d’accessibilité est jugé bon ou très bon.

Toutefois, avant de les utiliser dans votre projet, il est important de vérifier le respect des spécifications présentées ci-avant. Certains pouvant nécessiter quelques ajustements.

3 commentaires

  • Par Benjamin, le 13 novembre 2016 à 15:04.

    Bonjour,

    Il y a quelque chose qui m’échappe dans votre exemple : quel est l’intérêt d’ajouter une balise alt sur l’image qui a par ailleurs un attribut aria-hidden ?

    Répondre

    • Par Sébastien Delorme, le 14 novembre 2016 à 11:10.

      Bonjour,

      Ah ah, c’est la petite subtilité de la recommandation, si vous vous posez la question, c’est que vous avez en tout cas bien compris tout le reste. J’en suis ravi.

      En effet, ici, on place l’alternative de l’image plutôt pour d’autres raisons que l’accessibilité. C’est plutôt dans le cas où l’image ne serait pas chargée correctement, pour permettre d’afficher le texte alternatif.
      Et on ne la fait pas lire par les aides techniques pour éviter la redite.

      Sébastien.

      Répondre

      • Par Benjamin, le 14 novembre 2016 à 15:36.

        Je n’avais pas pensé à cet aspect, en effet :-)

Répondre à Sébastien Delorme

Les champs avec astérisque (*) sont obligatoires.

Haut de page