ARIA : rôle radiogroup
Le rôle radiogroup
représente un groupe de boutons radio
.
Description
Un groupe radio est un ensemble d'options radio
liées. Un radiogroup
est un type de liste select
qui ne peut avoir qu'une seule entrée, ou bouton radio, sélectionnée à la fois.
Lorsque vous utilisez le bouton radio HTML natif <input type="radio">
, les boutons radio sont regroupés lorsque chaque bouton du groupe possède le même name
. Une fois le groupe créé, sélectionner un bouton radio désélectionne automatiquement tout autre bouton radio actuellement sélectionné du même groupe. Cela associe les boutons radio entre eux, mais pour exposer explicitement le regroupement comme un radiogroup
, il faut définir le rôle ARIA.
Il est recommandé de créer des groupes radio en utilisant des boutons radio HTML natifs avec le même nom. Cependant, si vous devez utiliser les rôles et attributs ARIA à la place des contrôles de formulaire HTML sémantiques, les boutons radio personnalisés doivent se comporter comme les boutons radio natifs.
Lorsque vous utilisez des éléments non sémantiques comme boutons radio, vous devez garantir que l'utilisateur·ice ne peut sélectionner qu'un seul bouton radio du groupe à la fois. Lorsqu'un élément du groupe est sélectionné (aria-checked
à true
), l'élément précédemment sélectionné devient non sélectionné (aria-checked
à false
). L'attribut aria-checked
est défini sur les rôles radio
associés, et non sur le radiogroup
lui-même.
Certaines implémentations de radiogroup
initialisent le groupe avec tous les boutons non sélectionnés. Une fois qu'un bouton radio est sélectionné, il n'est généralement pas possible de revenir à un état où aucun bouton n'est sélectionné.
Le radiogroup
doit avoir un nom accessible, soit par un label visible référencé par aria-labelledby
, soit par un label spécifié avec aria-label
. Si des éléments fournissent des informations supplémentaires sur le groupe, ils sont référencés par le radiogroup
via la propriété aria-describedby
.
Propriétés, états et rôles WAI-ARIA associés
- le rôle
radio
-
Un des boutons sélectionnables d'un groupe, dans un
radiogroup
, où un seul bouton peut être sélectionné à la fois. aria-labelledby
/aria-label
-
Le
radiogroup
doit avoir un nom accessible, soit par un label visible référencé pararia-labelledby
, soit par un label spécifié avecaria-label
. aria-describedby
-
Référence vers des éléments fournissant des informations supplémentaires sur le
radiogroup
. aria-required
-
Indique qu'un bouton radio du groupe doit avoir
aria-checked="true"
avant que le formulaire puisse être soumis. L'état requis est spécifié sur l'élémentradiogroup
et non sur les boutons radio, contrairement à l'attribut HTMLrequired
qui est défini directement sur un ou plusieurs éléments radio<input>
. aria-errormessage
-
Identifie l'élément qui fournit un message d'erreur pour le
radiogroup
, si une erreur est présente. Ce message doit être masqué lorsqu'il n'est pas pertinent.
Interactions au clavier
Pour les boutons radio dans un radiogroup
qui n'est pas dans une toolbar
, les interactions clavier suivantes doivent être prises en charge :
- Tab et Maj + Tab
-
Déplace la sélection dans et hors du
radiogroup
. Lorsque la sélection entre dans unradiogroup
, si un bouton radio est sélectionné, la sélection se place sur ce bouton. Si aucun bouton n'est sélectionné, la sélection se place sur le premier bouton du groupe. - Espace
-
Sélectionne le bouton radio sélectionné si ce n'est pas déjà le cas.
- Flèche vers la droite et Flèche vers le bas
-
Déplace la sélection vers le bouton radio suivant du groupe, désélectionne le bouton précédemment sélectionné et sélectionne le nouveau bouton. Si la sélection est sur le dernier bouton, 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 le bouton radio précédent du groupe, désélectionne le bouton précédemment sélectionné et sélectionne le nouveau bouton. Si la sélection est sur le premier bouton, elle se déplace vers le dernier bouton du groupe.
Les flèches sont utilisées pour naviguer entre les éléments d'une barre d'outils. Lorsqu'un radiogroup
est imbriqué dans une barre d'outils, l'utilisateur·ice doit pouvoir naviguer parmi tous les éléments de la barre, y compris les boutons radio, sans changer le bouton sélectionné. Ainsi, lors de la navigation dans un radiogroup
dans une toolbar
avec les flèches, le bouton sélectionné ne change pas. Dans une barre d'outils, les touches Espace et Entrée sélectionnent le bouton radio sélectionné si ce n'est pas déjà le cas, et Tab déplace la sélection dans et hors de la barre d'outils.
Fonctionnalités JavaScript requises
Les interactions utilisateur pour les radiogroup
doivent reproduire celles d'un groupe de boutons radio HTML natifs avec le même nom. Les événements clavier pour Tab, Espace et les flèches doivent être capturés. Les clics sur les éléments radio et leurs labels associés doivent aussi être capturés. De plus, la gestion de la sélection (angl.) doit être assurée.
En général, quitter un élément sélectionné amène à l'élément sélectionnable suivant dans l'ordre du DOM. Utiliser les flèches pour naviguer dans un groupe de boutons radio maintient la sélection dans le groupe, déplaçant la sélection vers le premier bouton radio lorsque Flèche vers la droite ou Flèche vers le bas est relâchée alors que la sélection était sur le dernier bouton, et vers le dernier bouton si Flèche vers la gauche ou Flèche vers le haut est relâchée alors que la sélection était sur le premier bouton. La gestion dynamique de tabindex
est une méthode pour gérer ces événements.
Fonctionnalités CSS requises
Utilisez le sélecteur d'attribut [aria-checked="true"]
(sélecteur d'attribut) pour styliser l'état sélectionné des boutons radio.
Utilisez les pseudo-classes CSS :hover
et :focus
pour styliser la sélection visuelle au clavier et le survol. L'effet de sélection et de survol doit englober le bouton radio et le label pour faciliter la perception de l'option choisie et indiquer que cliquer sur le label ou le bouton active le bouton radio.
Exemples
Voici la structure de base d'un radiogroup
utilisant les rôles ARIA non sémantiques à la place du HTML sémantique :
<div role="radiogroup" aria-labelledby="question">
<div id="question">Quelle est la meilleure couleur ?</div>
<div id="radioGroup">
<p>
<span
id="colorOption_0"
tabindex="0"
role="radio"
aria-checked="false"
aria-labelledby="purple"></span>
<span id="purple">Violet</span>
</p>
<p>
<span
id="colorOption_1"
tabindex="-1"
role="radio"
aria-checked="false"
aria-labelledby="aubergine"></span>
<span id="aubergine">Aubergine</span>
</p>
<p>
<span
id="colorOption_2"
tabindex="-1"
role="radio"
aria-checked="false"
aria-labelledby="magenta"></span>
<span id="magenta">Magenta</span>
</p>
<p>
<span
id="colorOption_3"
tabindex="-1"
role="radio"
aria-checked="false"
aria-labelledby="all"></span>
<span id="all">Toutes les couleurs ci-dessus</span>
</p>
</div>
</div>
Cela pourrait être écrit en HTML sémantique, sans CSS ni JavaScript :
<fieldset>
<legend>Quelle est la meilleure couleur ?</legend>
<p>
<input name="colorOption" type="radio" id="purple" />
<label for="purple">Violet</label>
</p>
<p>
<input name="colorOption" type="radio" id="aubergine" />
<label for="aubergine">Aubergine</label>
</p>
<p>
<input name="colorOption" type="radio" id="magenta" />
<label for="magenta">Magenta</label>
</p>
<p>
<input name="colorOption" type="radio" id="all" />
<label for="all">Toutes les couleurs ci-dessus</label>
</p>
</fieldset>
Dans cet exemple avec <fieldset>
, le rôle radiogroup
n'est pas nécessaire, mais pour que le regroupement soit explicitement annoncé comme radiogroup
, ajoutez le rôle ARIA.
Spécifications
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA)> # radiogroup> |
Unknown specification> |
Voir aussi
- L'élément HTML
<fieldset>
- L'élément HTML <input type="radio"> de bouton radio
- ARIA : rôle
radio
aria-errormessage
aria-invalid
aria-readonly
aria-required