Boutons radio simulés en ARIA

Sommaire

Principe

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

Les boutons radio sont dits « simulé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’utilisateur 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 à l’utilisateur de quitter le groupe de boutons radio.

Dans le cas où aucun bouton radio n’est sélectionné au moment où l’utilisateur 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

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. Radiogroup.
  3. Radiogroup: aria-activedescendant.
  4. Radio Group Example Using Roving tabindex.

3 commentaires

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

    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 à 17h23.

    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