Boutons radio simulés 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 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 Button » détaillé dans les WAI-ARIA 1.0 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é.

Ctrl + Flèches de navigation

Lorsque le focus est positionné sur l’un des boutons radio, déplace le focus à travers les options, sans sélectionner de bouton radio.

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.

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. Radio Button Example.
  2. Checkboxes and Radio Buttons.
  3. Radiogroup.
  4. Radiogroup: aria-activedescendant.

1 commentaire

  • 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

Ajouter un commentaire

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

Haut de page