ARIA : rôle radio
Le rôle radio
fait partie d'un groupe de boutons radio sélectionnables, dans un radiogroup
, où un seul bouton radio peut être sélectionné à la fois.
Description
Un bouton radio est un champ de saisie sélectionnable qui, lorsqu'il est associé à d'autres boutons radio, ne permet qu'à un seul d'être sélectionné à la fois. Les boutons radio doivent être regroupés dans un radiogroup
pour indiquer lesquels affectent la même valeur.
<div role="radiogroup" aria-labelledby="legend25" id="radiogroup25">
<p id="legend25">Ipsum et lorem ?</p>
<div>
<span
role="radio"
aria-checked="false"
tabindex="0"
aria-labelledby="q25_radio1-label"
data-value="True"></span>
<label id="q25_radio1-label">Vrai</label>
</div>
<div>
<span
role="radio"
aria-checked="false"
tabindex="0"
aria-labelledby="q25_radio2-label"
data-value="False"></span>
<label id="q25_radio2-label">Faux</label>
</div>
<div>
<span
role="radio"
aria-checked="true"
tabindex="0"
aria-labelledby="q25_radio3-label"
data-value="huh?"></span>
<label id="q25_radio3-label">Quelle est la question ?</label>
</div>
</div>
L'attribut role
ajoute uniquement une sémantique ; toutes les fonctionnalités natives du bouton radio HTML doivent être ajoutées avec JavaScript et l'attribut HTML tabindex
.
Note :
La première règle d'ARIA est : si un élément ou un attribut HTML natif possède la sémantique et le comportement dont vous avez besoin, utilisez-le au lieu de réutiliser un élément et d'ajouter ARIA. Utilisez plutôt l'élément natif HTML <input type="radio">
(avec un <label>
associé), qui fournit nativement toutes les fonctionnalités requises :
<fieldset>
<legend>Ipsum et lorem ?</legend>
<div>
<input type="radio" value="True" id="q25_radio1" name="q25" />
<label for="q25_radio1">Vrai</label>
</div>
<div>
<input type="radio" value="False" id="q25_radio2" name="q25" />
<label for="q25_radio2">Faux</label>
</div>
<div>
<input type="radio" value="huh?" id="q25_radio3" name="q25" checked />
<label for="q25_radio3">Quelle est la question ?</label>
</div>
</fieldset>
Le contrôle natif de formulaire radio HTML (<input type="radio">
) possède deux états (« sélectionné » ou « non sélectionné »). De la même manière, un élément avec role="radio"
peut exposer deux états via l'attribut aria-checked
: true
pour l'état sélectionné, et false
pour l'état non sélectionné. La valeur mixed
pour aria-checked
n'est pas valide pour un bouton radio.
Si un bouton radio est sélectionné, l'élément radio a aria-checked
défini sur true
. S'il n'est pas sélectionné, il a aria-checked
défini sur false
.
Chaque bouton radio possède le rôle radio
. Le rôle radio doit toujours être imbriqué avec d'autres radios associées dans un radiogroup
. S'il n'est pas possible d'imbriquer le bouton radio dans un groupe, utilisez l'identifiant (id
) du radio non groupé dans une liste de valeurs séparées par des espaces comme valeur de l'attribut aria-owns
sur l'élément radiogroup
pour indiquer la relation entre le groupe et ses membres radio.
Chaque élément radio est labellisé par son contenu, possède un label visible référencé par aria-labelledby
, ou un label spécifié avec aria-label
. L'élément radiogroup
contenant doit avoir un label visible référencé par aria-labelledby
ou un label spécifié avec aria-label
. Si des éléments fournissent des informations supplémentaires sur le groupe ou sur chaque bouton radio, ces éléments doivent être référencés par le groupe ou les radios via la propriété aria-describedby
.
Comme radio
est un contrôle interactif, il doit être accessible au clavier et pouvoir recevoir la sélection. Si le rôle est appliqué à un élément non sélectionnable, utilisez l'attribut tabindex
pour corriger cela. Le raccourci clavier attendu pour activer un radio est la touche Espace. Utilisez JavaScript pour basculer l'attribut aria-checked
à true
lorsqu'un radio devient sélectionné, en veillant à ce que tous les autres rôles radio du groupe soient définis sur aria-checked="false"
.
Pour indiquer programmatiquement qu'un bouton radio doit être choisi dans un groupe, l'attribut aria-required
avec la valeur true
doit être spécifié sur l'élément radiogroup
. Il n'est pas attendu d'utiliser l'attribut aria-required
sur les boutons radio individuels.
Tous les descendants sont des éléments de présentation
Certaines interfaces utilisateur, lorsqu'elles sont représentées dans une API d'accessibilité de plateforme, ne peuvent contenir que du texte. Les API d'accessibilité ne permettent pas de représenter des éléments sémantiques contenus dans un radio
. Pour pallier cette limitation, les navigateurs appliquent automatiquement le rôle presentation
à tous les descendants d'un élément radio
, car il s'agit d'un rôle qui ne prend pas en charge les enfants sémantiques.
Par exemple, considérez l'élément radio
suivant, qui contient un titre :
<div role="radio"><h6>nom de mon élément radio</h6></div>
Comme les descendants de radio
sont des éléments de présentation, le code suivant est équivalent :
<div role="radio"><h6 role="presentation">nom de mon élément radio</h6></div>
Du point de vue de l'utilisateur·ice de technologie d'assistance, le titre n'existe pas, car les exemples précédents sont équivalents à ce qui suit dans l'arbre d'accessibilité :
<div role="radio">nom de mon radio</div>
Propriétés, états et rôles WAI-ARIA associés
- le rôle
radiogroup
-
Les boutons radio sont contenus ou possédés par un élément avec le rôle
radiogroup
. S'il n'est pas possible d'imbriquer les boutons radio dans unradiogroup
dans le balisage, l'attributaria-owns
du groupe contient les identifiants (id
) des boutons radio non imbriqués dans le groupe. aria-checked
-
La valeur de
aria-checked
définit l'état d'un radio. Lorsqu'il est utilisé avec des éléments radio, l'attribut a deux valeurs possibles :
Note :
Utilisez l'attribut tabindex
si le role="radio"
est utilisé sur un élément qui n'accepte pas nativement la sélection au clavier (ex : un <div>
ou un <span>
).
Interactions au clavier
- Tab + Maj
-
Déplace la sélection dans et hors du groupe radio. Lorsque la sélection entre dans un groupe radio et qu'un bouton radio est déjà sélectionné, la sélection se place sur le bouton sélectionné. Si aucun bouton radio n'est sélectionné, la sélection se place sur le premier bouton du groupe.
- Espace
-
Sélectionne le radio s'il n'est pas déjà sélectionné. Désélectionne le bouton radio précédemment sélectionné dans le groupe.
- Flèche vers la droite et Flèche vers le bas
-
Déplace la sélection vers et sélectionne le bouton radio suivant du groupe, désélectionnant le bouton radio précédemment sélectionné. Si la sélection est sur le dernier bouton radio, elle se déplace vers le premier bouton du groupe.
- Flèche vers la gauche et Flèche vers le haut
-
Déplace la sélection vers et sélectionne le bouton radio précédent du groupe, désélectionnant le bouton radio précédemment sélectionné. Si la sélection est sur le premier bouton radio, elle se déplace vers le dernier bouton du groupe.
Boutons radio dans une barre d'outils
Comme les flèches sont utilisées pour naviguer entre les éléments d'une barre d'outils et que la touche Tab déplace la sélection dans et hors de la barre d'outils, lorsqu'un groupe radio est imbriqué dans une barre d'outils, l'interaction clavier du groupe radio est légèrement différente de celle d'un groupe radio qui n'est pas dans une barre d'outils. Voir les interactions au clavier de radiogroup pour plus d'informations.
JavaScript requis
onClick
-
Gère les clics de souris sur le radio et le label associé pour changer l'état du radio en modifiant la valeur de l'attribut
aria-checked
et l'apparence du radio afin qu'il apparaisse comme sélectionné ou non sélectionné pour l'utilisateur·ice voyant·e. onKeyPress
-
Gère le cas où l'utilisateur·ice appuie sur la touche Espace pour changer l'état du radio en modifiant la valeur de l'attribut
aria-checked
et l'apparence du radio afin qu'il apparaisse comme sélectionné ou non sélectionné pour l'utilisateur·ice voyant·e.
Exemples
L'exemple suivant utilise ARIA pour modifier des éléments génériques afin qu'ils soient exposés comme des boutons radio. CSS et JavaScript sont utilisés pour modifier visuellement et programmatiquement l'état sélectionné ou non sélectionné de l'élément.
HTML
<div role="radiogroup" aria-labelledby="legend" id="radiogroup">
<p id="legend">
Faut-il utiliser le rôle <code>radio</code> ou
<code><input type="radio"></code> ?
</p>
<div>
<span
role="radio"
aria-checked="true"
tabindex="0"
aria-labelledby="ariaLabel"
data-value="True"></span>
<label id="ariaLabel">Rôle ARIA</label>
</div>
<div>
<span
role="radio"
aria-checked="false"
tabindex="0"
aria-labelledby="htmllabel"
data-value="False"></span>
<label id="htmllabel">HTML <code><input type="radio"></code></label>
</div>
</div>
CSS
[role="radio"] {
padding: 5px;
}
[role="radio"][aria-checked="true"]::before {
content: "(x)";
font-family: monospace;
}
[role="radio"][aria-checked="false"]::before {
content: "( )";
font-family: monospace;
}
JavaScript
Beaucoup de JavaScript est nécessaire pour créer des boutons radio à partir d'éléments HTML non sémantiques.
// Initialiser tous les éléments avec le rôle radio
const radioGroups = document.querySelectorAll('[role="radiogroup"]');
for (const radioGroup of radioGroups) {
const radios = radioGroup.querySelectorAll("[role=radio]");
for (const radio of radios) {
radio.addEventListener("keydown", handleKeydown);
radio.addEventListener("click", handleClick);
}
}
// Gérer les événements de souris et de tactile
function handleClick(event) {
setChecked(this);
event.stopPropagation();
event.preventDefault();
}
// Gérer les appuis sur les touches
function handleKeydown(event) {
switch (event.code) {
case "Space":
case "Enter":
currentChecked();
break;
case "ArrowUp":
case "ArrowLeft":
previousRadioChecked();
break;
case "ArrowDown":
case "ArrowRight":
nextItemChecked();
break;
default:
break;
}
event.stopPropagation();
event.preventDefault();
}
// Lorsqu'un radio est sélectionné, lui donner la sélection, le définir comme sélectionné
// et s'assurer que tous les autres radios du groupe ne sont pas sélectionnés
function setChecked() {
// Désélectionner tous les radios du groupe
// Parcourir tous les radios du groupe
// eachRadio.tabIndex = -1;
// eachRadio.setAttribute('aria-checked', 'false');
// Définir le radio sélectionné comme sélectionné
// thisRadio.setAttribute('aria-checked', 'true');
// thisRadio.tabIndex = 0;
// thisRadio.focus();
// Définir la valeur du groupe sur la valeur du radio actuellement sélectionné
}
Aucun JavaScript (ni même CSS) n'est nécessaire si on utilise l'élément HTML sémantique avec le même nom pour chaque bouton radio dans un groupe :
<fieldset>
<legend>
Faut-il utiliser le rôle <code>radio</code> ou
<code><input type="radio"></code> ?
</legend>
<div>
<input type="radio" name="bestPractices" id="ariaLabel" value="True" />
<label for="ariaLabel">Rôle ARIA</label>
</div>
<div>
<input type="radio" name="bestPractices" id="htmllabel" value="False" />
<label for="htmllabel">HTML <code><input type="radio"></code></label>
</div>
</fieldset>
Bonnes pratiques
La première règle d'ARIA est : si un élément ou un attribut HTML natif possède la sémantique et le comportement dont vous avez besoin, utilisez-le au lieu de réutiliser un élément et d'ajouter un rôle, un état ou une propriété ARIA pour le rendre accessible. Il est donc recommandé d'utiliser les contrôles natifs bouton radio HTML plutôt que de recréer la fonctionnalité d'un radio avec JavaScript et ARIA.
Voir aussi
- L'élément HTML
<input type="radio">
de bouton radio - L'attribut HTML
tabindex
- ARIA : rôle
radiogroup
- ARIA : rôle
checkbox
- ARIA : rôle
menuitem
- ARIA : rôle
menuitemradio
- ARIA : rôle
option