Boutons radio personnalisés en ARIA

Sommaire

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.

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

Socle HTML

<p id="question">Question</p>
<ul aria-labelledby="question" role="radiogroup">
  <li role="radio" aria-checked="false" tabindex="-1">
    <img aria-hidden="true" src="radio.svg" alt="Non sélectionné : " />
    Choix 1
  </li>
  <li role="radio" aria-checked="true" tabindex="0">
    <img aria-hidden="true" src="radio-checked.svg" alt="Sélectionné : " />
    Choix 2
  </li>
  <li role="radio" aria-checked="false" tabindex="-1">
    <img aria-hidden="true" src="radio.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 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é :

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

Composants

Ces composants « Boutons radio personnalisés 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.

Commentaires

Ajouter un commentaire

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

Haut de page