Cases à cocher personnalisées en ARIA

Sommaire

• Principe.
• Socle HTML.
• Rôles, états et propriétés ARIA.
• Interactions au clavier.
• Remarques.

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.

Socle HTML

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

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

• role="group" doit être appliqué sur le groupe de cases à cocher.
• role="checkbox" et tabindex="0" doivent être appliqués sur le conteneur de chaque case à cocher.
• aria-hidden="true" doit être appliqué sur chaque image simulant une case à cocher.
• L’attribut aria-checked doit être appliqué sur le conteneur de chaque case à cocher. Sa valeur doit être renseignée dynamiquement en fonction de l’état de la case à cocher associée :
  • aria-checked="true" lorsque la case est cochée.
  • aria-checked="false" lorsque la case n’est pas cochée.
• Le groupe de cases à cocher doit être rattaché à l’étiquette du groupe via l’attribut aria-labelledby :
  • L’étiquette du groupe doit posséder un attribut id renseigné avec une valeur unique.
  • Le groupe de cases à cocher doit posséder un attribut aria-labelledby renseigné avec la valeur de l’attribut id de l’étiquette du groupe.

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>.

4 commentaires

Mises à jour

Haut de page