Cases à cocher simulées en ARIA

Une mise à jour de la spécification ARIA est en cours d’officialisation : passage progressif de ARIA 1.0 (recommandation actuelle) à ARIA 1.1 (recommandation en cours d’homologation).

Cette fiche s’appuie sur les motifs de conception ARIA 1.0 issus du document WAI-ARIA Authoring Practices 1.0, et les recommandations ci-dessous pourront faire l’objet d’ajustements une fois la version ARIA 1.1 officialisée.

Pour plus d’informations sur les changements relatifs au passage à ARIA 1.1, consulter les WAI-ARIA Authoring Practices 1.1.

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 « Check Box » détaillé dans les WAI-ARIA 1.0 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.

Comportements attendus

Remarque

À 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> ou une police d’icônes.

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. Checkbox Example (Two State).
  2. Checkboxes and Radio Buttons.
  3. Checkboxes using IMG elements for visual state.
  4. Checkbox group using IMG elements for visual state.

4 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

Ajouter un commentaire

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

Haut de page