Cases à cocher simulées en ARIA

Sommaire

Principe

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

Les cases à cocher sont dites « simulé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

Les composants ci-après 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, variables en fonction de la version utilisée.

  1. Checkboxes and Radio Buttons.
  2. Checkboxes using IMG elements for visual state.
  3. Checkbox Example (Two State).
  4. Checkbox group using IMG elements for visual state.

6 commentaires

  • Par Benjamin, le 13 novembre 2016 à 15h04.

    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 à 11h10.

      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 à 15h36.

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

  • Par Laurent Bracquart, le 10 juillet 2017 à 11h23.

    Ajout d’un encart informatif concernant la mise à jour de la spécification ARIA depuis la version ARIA 1.0 vers la version ARIA 1.1 en introduction de la fiche le 10/07/2017.

    Répondre

  • Par Laurent Bracquart, le 9 janvier 2018 à 11h17.

    Modification de l’encart informatif concernant la mise à jour de la spécification ARIA depuis la version ARIA 1.0 vers la version ARIA 1.1 en introduction de la fiche le 09/01/2018.

    Répondre

  • Par Laurent Bracquart, le 18 janvier 2018 à 17h28.

    Mise à jour de la fiche le 18/01/2017 :

    • Mise à jour du contenu de la fiche pour s’appuyer sur les motifs de conception ARIA 1.1.
    • Suppression de l’encart informatif concernant la mise à jour de la spécification ARIA depuis la version ARIA 1.0 vers la version ARIA 1.1 en introduction de la fiche.

    Répondre

Ajouter un commentaire

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

Haut de page