ARIA : rôle menuitemradio
Le rôle menuitemradio
est un élément de menu sélectionnable dans un ensemble d'éléments ayant le même rôle, dont un seul peut être sélectionné à la fois.
Description
Les éléments dans les menus et les barres de menus sont des éléments de menu. Il existe trois types d'éléments de menu : menuitem
, menuitemcheckbox
et menuitemradio
. Pour limiter le nombre d'éléments sélectionnés à un seul dans un groupe, utilisez le rôle menuitemradio
sur tous les éléments du groupe.
Un menuitemradio
est un élément de menu sélectionnable dans un ensemble d'éléments ayant le même rôle, dont un seul peut être sélectionné à la fois.
Les trois types d'éléments de menu ne peuvent être contenus ou possédés que par un élément ayant le rôle menu
ou menubar
, éventuellement imbriqués dans un élément de regroupement ayant le rôle group
. Être imbriqué ou possédé (voir aria-owns
) dans un menu
ou une menubar
identifie les éléments de menu comme des widgets liés.
Lorsque tous les éléments d'un sous-menu sont membres du même groupe radio, le group
est défini par l'élément menu ; l'élément group
n'est pas nécessaire.
Les éléments de menu ayant le rôle menuitemradio
doivent inclure l'attribut aria-checked
pour exposer l'état du bouton radio aux technologies d'assistance, sauf si vous utilisez <input type="radio">
, auquel cas l'attribut checked
doit être utilisé.
Comme pour l'attribut checked
des <input>
de type radio
, l'attribut aria-checked
d'un menuitemradio
indique si l'élément de menu est sélectionné (true
) ou non (false
). Il n'existe pas de valeur mixed
comme pour menuitemcheckbox
.
Un seul menuitemradio
dans un groupe peut être sélectionné à la fois. Lorsqu'un élément du groupe est sélectionné, l'attribut aria-checked
est défini sur true
, tandis que l'élément menuitemradio
précédemment sélectionné dans le même groupe, s'il y en avait un, devient non sélectionné, en passant la valeur de l'attribut aria-checked
à false
.
Si vous souhaitez que plusieurs éléments d'un groupe soient sélectionnés, ou si vous souhaitez permettre la sélection et la désélection d'un élément, utilisez plutôt menuitemcheckbox
.
Si un menu
ou une menubar
contient plusieurs groupes d'éléments menuitemradio
, ou si le menu
contient un groupe d'éléments menuitemradio
ainsi que d'autres éléments menuitem
non liés et/ou des éléments menuitemcheckbox
, regroupez chaque ensemble d'éléments menuitemradio
liés dans un élément group
ou séparez le groupe des autres éléments de menu avec un élément separator
(ou un élément HTML ayant un rôle équivalent comme un regroupement <fieldset>
ou une séparation thématique <hr>
).
Un nom accessible est requis. Idéalement, le nom accessible doit provenir d'un élément <label>
associé si vous utilisez <input type="radio">
ou d'un contenu visible descendant. Sachez que si le label ou le contenu descendant n'est pas suffisant et que, de préférence, aria-labelledby
est utilisé en référant un contenu non descendant ou aria-label
est utilisé, ces deux propriétés ARIA masqueront les autres contenus descendants aux technologies d'assistance.
Si tous les éléments de l'ensemble ne sont pas présents dans le DOM, incluez les propriétés aria-setsize
et aria-posinset
. Lors de la spécification de aria-setsize
et aria-posinset
sur un menuitemradio
, définissez la valeur en fonction du nombre total d'éléments dans le menu, en excluant les séparateurs.
L'élément menuitemradio
peut contenir du contenu phrastique, mais ne peut pas avoir de contenu interactif comme descendants ni de descendants avec un attribut tabindex
spécifié.
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 menuitemradio
. Pour pallier cette limitation, les navigateurs appliquent automatiquement le rôle presentation
à tous les éléments descendants d'un élément menuitemradio
, 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 menuitemradio
suivant, qui contient un titre :
<div role="menuitemradio"><h6>Nom de mon bouton radio</h6></div>
Comme les descendants de menuitemradio
sont présentatifs, le code suivant est équivalent :
<div role="menuitemradio">
<h6 role="presentation">Nom de mon bouton radio</h6>
</div>
Du point de vue de l'utilisateur·ice de technologies d'assistance, le titre n'existe pas puisque les extraits de code précédents sont équivalents à ce qui suit dans l'arbre d'accessibilité :
<div role="menuitemradio">Nom de mon bouton radio</div>
Propriétés, états et rôles WAI-ARIA associés
-
Widget qui propose une liste d'actions ou de fonctions courantes que l'utilisateur·ice peut invoquer.
-
Similaire à
menu
pour un ensemble cohérent de commandes fréquemment utilisées, restant visible et généralement présenté horizontalement. - Rôle
group
-
Conteneur pour un groupe d'éléments
menuitem
, y compris les élémentsmenuitemradio
dans unmenu
ou unemenubar
. aria-checked
(Obligatoire)-
Défini sur
true
oufalse
, indique l'état actuel « sélectionné » du menuitemradio
Interactions au clavier
Lorsqu'un menu
s'ouvre ou qu'une menubar
reçoit le focus, le focus clavier est placé sur le premier élément. Tous les éléments dans les deux sont sélectionnables, y compris tous les éléments menuitemradio
.
Si le menuitemradio
se trouve dans un sous-menu d'une menubar
ou d'un menu ouvert avec un bouton de menu, les interactions clavier suivantes doivent être programmées :
- Entrée
-
Si non sélectionné, sélectionne le
menuitemradio
focalisé et désélectionne tout autre élémentmenuitemradio
sélectionné dans le même groupe. Ferme également le menu. - Espace
-
Si non sélectionné, sélectionne le
menuitemradio
focalisé et désélectionne tout autre élémentmenuitemradio
sélectionné dans le même groupe sans fermer le menu. - Échap
-
Ferme le menu. Dans une menubar, déplace le focus vers l'élément parent de la menubar.
- Flèche vers la droite
-
Ferme le sous-menu. Dans une menubar, déplace le focus vers l'élément suivant de la menubar, en ouvrant le sous-menu s'il y en a un.
- Flèche vers la gauche
-
Ferme le menu. Dans une menubar, déplace le focus vers l'élément précédent de la menubar, en ouvrant le sous-menu s'il y en a un.
- Flèche vers le bas
-
Déplace le focus vers l'élément suivant du menu. Si le focus est sur le dernier élément, le focus passe au premier élément.
- Flèche vers le haut
-
Déplace le focus vers l'élément précédent du menu. Si le focus est sur le premier élément, le focus passe au dernier élément.
- Début
-
Déplace le focus vers le premier élément du menu.
- Fin
-
Déplace le focus vers le dernier élément du menu.
- Caractère
-
Déplace le focus vers le prochain élément dont le nom commence par le caractère saisi. Si aucun élément ne commence par ce caractère, le focus ne bouge pas.
Requis en JavaScript
Gestionnaires d'événements requis
onclick
-
Gère les clics de souris sur le bouton radio et le label associé, ce qui modifie l'état du bouton radio en changeant la valeur de l'attribut
aria-checked
et l'apparence du bouton radio pour qu'il apparaisse comme sélectionné ou non sélectionné pour l'utilisateur·ice voyant·e. onKeyDown
-
Gère le cas où l'utilisateur·ice appuie sur la touche Espace pour changer l'état du bouton radio en modifiant la valeur de l'attribut
aria-checked
et l'apparence du bouton radio pour qu'il apparaisse comme sélectionné ou non sélectionné pour l'utilisateur·ice voyant·e. Gère également toutes les touches listées dans la section navigation au clavier ci-dessus.
Exemples
<li role="menuitemradio" tabindex="-1" aria-checked="false">Violet</li>
Le tabindex="-1"
rend le menuitemradio
sélectionnable au clavier mais ne l'intègre pas dans la séquence de tabulation de la page. Si nous avions inclus aria-checked="true"
, cela aurait indiqué que le menuitemradio
était sélectionné, et nous aurions stylisé visuellement l'état sélectionné pour qu'il apparaisse comme coché en utilisant le sélecteur d'attribut [role='menuitemradio'][aria-checked='true']
. Au contraire, la présence de aria-checked="false"
indique aux technologies d'assistance que le menuitemradio
est sélectionnable mais pas actuellement sélectionné. Le nom accessible « Violet » provient du contenu.
L'apparence visuelle de l'état sélectionné est celle d'un bouton radio coché que l'on peut créer avec du contenu généré, en le rendant visible et de la même couleur que le contenu en synchronisant avec la valeur de aria-checked
grâce aux sélecteurs d'attributs et en modifiant la propriété background-color
.
[role="menuitemradio"]::before {
display: inline-block;
content: "";
width: 1em;
height: 1em;
padding: 0.1em;
border: 2px solid #333333;
border-radius: 50%;
box-sizing: border-box;
background-clip: content-box;
margin-inline-end: 2px;
}
[role="menuitemradio"][aria-checked="true"]::before {
background-color: purple;
}
N'utilisez pas la propriété raccourcie background
, car cela écraserait la propriété background-clip
utilisée pour créer l'effet bouton radio.
Préférez HTML
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 plutôt que 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 le contrôle natif bouton radio HTML plutôt que de recréer la fonctionnalité d'un bouton radio avec JavaScript et ARIA.
Spécifications
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA)> # menuitemradio> |
Unknown specification> |