Boutons radio personnalisés en ARIA

Sommaire

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

Principe

Les boutons radio sont des éléments de formulaires qui permettent de sélectionner une option unique parmi un groupe d’options proposées.

Les boutons radio sont dits « personnalisés en ARIA » lorsqu’ils ne sont pas construits sur la base du code HTML standard prévu pour ces éléments par la spécification : <input type="radio" />.

Le suivi des recommandations ci-dessous permet de reproduire le comportement par défaut des boutons radio HTML standards, dans les cas où ces derniers ne peuvent être utilisés.

Socle HTML

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

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

• role="radiogroup" doit être appliqué sur le groupe de boutons radio.
• role="radio" doit être appliqué sur le conteneur de chaque bouton radio.
• L’attribut tabindex doit être appliqué par défaut sur le conteneur de chaque bouton radio. Sa valeur doit être renseignée dynamiquement en fonction de l’état des boutons radio :
  • Si aucun bouton radio n’est sélectionné : tabindex="0" sur le premier et le dernier bouton radio du groupe, tabindex="-1" sur les autres boutons radio.
  • Si un bouton radio est sélectionné : tabindex="0" sur le bouton radio sélectionné, tabindex="-1" sur les autres boutons radio.
• aria-hidden="true" doit être appliqué sur chaque image simulant un bouton radio.
• L’attribut aria-checked doit être appliqué sur le conteneur de chaque bouton radio. Sa valeur doit être renseignée dynamiquement en fonction de l’état du bouton radio associé :
  • aria-checked="true" lorsque le bouton radio est sélectionné.
  • aria-checked="false" lorsque le bouton radio n’est pas sélectionné.
• Le groupe de boutons radio 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 boutons radio 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 boutons radio HTML classiques. À la seule exception que le focus clavier est ici positionné sur le conteneur du bouton radio et non uniquement sur le bouton radio.

Tab et Maj + Tab

Lorsque l’on accède en tabulant à un groupe de boutons radio, le focus est positionné au niveau de l’éventuel bouton radio sélectionné dans le groupe. Lorsque le focus est positionné sur un bouton radio sélectionné, la prochaine tabulation permet de quitter le groupe de boutons radio.

Dans le cas où aucun bouton radio n’est sélectionné au moment où l’on accède au groupe de boutons radio au clavier, le focus clavier est positionné :

• Au niveau du premier bouton radio du groupe si la touche Tab a été pressée.
• Au niveau du dernier bouton radio du groupe si les touches Maj + Tab ont été pressées.

Flèche haut et Flèche gauche

Lorsque le focus est positionné sur l’un des boutons radio, déplace le focus clavier vers le précédent bouton radio dans le groupe et sélectionne ce bouton. Si le focus clavier est positionné au niveau du premier bouton radio du groupe au moment où la touche est pressée, le focus clavier est déplacé au niveau du dernier bouton radio du groupe et ce bouton est sélectionné.

Flèche bas et Flèche droite

Lorsque le focus est positionné sur l’un des boutons radio, déplace le focus clavier vers le bouton radio suivant dans le groupe et sélectionne ce bouton. Si le focus clavier est positionné au niveau du dernier bouton radio du groupe au moment où la touche est pressée, le focus clavier est déplacé au niveau du premier bouton radio du groupe et ce bouton est sélectionné.

Espace

Lorsque le focus clavier est positionné sur un bouton radio, sélectionne le bouton radio et désélectionne l’éventuel autre bouton radio déjà sélectionné dans le groupe.

Remarques

La source de l’image, ainsi que son texte alternatif, doivent être modifiés en fonction de l’état du bouton radio correspondant.

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

Commentaires

Mises à jour

Haut de page