ARIA : rôle menuitem
Le rôle menuitem
indique que l'élément est une option dans un ensemble de choix contenus par un menu
ou menubar
.
Description
Un menuitem
est l'un des trois types d'options dans un ensemble de choix contenus par un menu
ou menubar
; les deux autres étant menuitemcheckbox
et menuitemradio
. Le menuitem
ne se trouve qu'en tant que descendant ou possédé par des éléments ayant le rôle menu
ou menubar
, éventuellement imbriqué dans un élément ayant le rôle group
qui est contenu dans, ou possédé par, un menu.
Si le menuitem
n'est pas un descendant d'un menu dans le DOM, incluez l'attribut aria-owns
sur le menu pour indiquer la relation. Si aria-owns
est défini sur le conteneur de menu pour inclure des éléments qui ne sont pas des enfants DOM du conteneur, ces éléments apparaîtront dans l'ordre de lecture dans la séquence dans laquelle ils sont référencés et après tout élément qui est un enfant DOM dans les technologies d'assistance. Assurez-vous que l'ordre de sélection visuel correspond à l'ordre de lecture de la technologie d'assistance.
Chaque menuitem
dans un menu est sélectionnable, qu'il soit désactivé ou non. Indiquez qu'un menuitem
est désactivé en définissant aria-disabled="true"
sur l'élément avec le rôle.
Si un menuitem
a un sous-menu, programmez-le pour afficher un nouveau sous-menu lorsque l'élément de menu est activé et incluez aria-haspopup="menu"
ou la valeur true
pour indiquer aux technologies d'assistance que l'élément de menu est utilisé pour ouvrir un sous-menu.
Une convention courante pour indiquer qu'un menuitem
lance une boîte de dialogue consiste à ajouter « … » (points de suspension) à l'étiquette de l'élément de menu, par exemple, « Enregistrer sous … ».
Chaque menuitem
doit avoir un nom accessible. Ce nom provient par défaut du contenu de l'élément. Si le contenu ne permet pas de fournir un nom accessible utile, aria-labelledby
peut être utilisé pour référencer une étiquette visible. Si aucun contenu visible n'est disponible pour fournir le nom accessible, un nom accessible peut être fourni avec aria-label
.
Propriétés, états et rôles WAI-ARIA associés
-
Un widget fournissant une liste de choix. Rôle de contexte requis (ou
menubar
). -
Une présentation d'un
menu
qui reste généralement visible et est généralement présentée horizontalement. Rôle de contexte requis (oumenu
). - le rôle
group
-
Peut être utilisé pour identifier un ensemble de
menuitem
s connexes dans ou possédés par unmenu
oumenubar
. aria-disabled
-
Indique que l'élément est perceptible mais désactivé, donc il n'est pas opérable.
aria-haspopup
-
Indique la disponibilité et le type de popup interactif qui peut être déclenché par le
menuitem
Interactions au clavier
- Entrée et Espace
-
Si le
menuitem
a un sous-menu, ouvre le sous-menu et place le focus sur son premier élément. Sinon, active l'élément et ferme le menu. - Flèche vers le bas
-
Sur un
menuitem
qui a un sous-menu dans unmenubar
, ouvre le sous-menu et place le focus sur le premier élément du sous-menu. Sinon, déplace le focus sur l'élément suivant, en option de wrapping du dernier au premier. - Flèche vers le haut
-
Déplace le focus vers l'élément précédent, en option de wrapping du premier au dernier. En option, si le
menuitem
est dans un menubar et a un sous-menu, ouvre le sous-menu et place le focus sur le dernier élément du sous-menu. - Flèche vers la droite
-
Si dans un
menu
ouvert avec un menubutton et pas dans unmenubar
, si le menuitem n'a pas de sous-menu, ne fait rien. Lorsque le focus est dans unmenubar
, déplace le focus vers l'élément suivant, en option de wrapping du dernier au premier. Lorsque le focus est dans unmenu
et sur unmenuitem
qui a un sous-menu, ouvre le sous-menu et place le focus sur son premier élément. Lorsque le focus est dans unmenu
et sur un élément qui n'a pas de sous-menu, ferme le sous-menu et tous les menus parents, déplace le focus vers l'élément suivant dans lemenubar
, et, si le focus est maintenant sur unmenuitem
avec un sous-menu, ouvre soit le sous-menu de cemenuitem
sans déplacer le focus dans le sous-menu, soit ouvre le sous-menu de cemenuitem
et place le focus sur le premier élément du sous-menu. - Flèche vers la gauche
-
Lorsque le focus est dans un
menubar
, déplace le focus vers l'élément précédent, en option de wrapping du premier au dernier. Lorsque le focus est dans un sous-menu d'un élément dans un menu, ferme le sous-menu et renvoie le focus aumenuitem
parent. Lorsque le focus est dans un sous-menu d'un élément dans unmenubar
, ferme le sous-menu, déplace le focus vers l'élément précédent dans lemenubar
, et, si le focus est maintenant sur unmenuitem
avec un sous-menu, ouvre soit le sous-menu de cemenuitem
sans déplacer le focus dans le sous-menu, soit ouvre le sous-menu de cemenuitem
et place le focus sur le premier élément du sous-menu. - Début
-
Si le wrapping des touches fléchées n'est pas pris en charge, déplace le focus vers le premier élément du
menu
ou dumenubar
actuel. - Fin
-
Si le wrapping des touches fléchées n'est pas pris en charge, déplace le focus vers le dernier élément du
menu
ou dumenubar
actuel. - Toute touche correspondant à un caractère imprimable (Optionnel)
-
Déplace le focus vers l'élément suivant dans le menu actuel dont l'étiquette commence par ce caractère imprimable.
- Échap
-
Ferme le menu qui contient le focus et renvoie le focus à l'élément ou au contexte, par exemple, le bouton de menu ou le
menuitem
parent, à partir duquel le menu a été ouvert. - Tab
-
Déplace le focus vers l'élément suivant dans la séquence de tabulation, et si l'élément qui avait le focus n'est pas dans un menubar, ferme son menu et tous les conteneurs de menu parents ouverts.
- Maj + Tab
-
Déplace le focus vers l'élément précédent dans la séquence de tabulation, et si l'élément qui avait le focus n'est pas dans un menubar, ferme son menu et tous les conteneurs de menu parents ouverts.
Si un menu est ouvert ou qu'une barre de menu reçoit le focus à la suite d'une action contextuelle, Échap ou Entrée peut renvoyer le focus au contexte d'invocation.
Certaines implémentations de barres de menus de navigation peuvent avoir des éléments de menu qui effectuent à la fois une fonction et ouvrent un sous-menu. Dans de telles implémentations, Entrée et Espace effectuent une fonction de navigation tandis que Flèche vers le bas, dans une barre de menus horizontale, ouvre le sous-menu associé à ce même élément de menu.
Lorsque les éléments d'une menubar
sont disposés verticalement et que les éléments des conteneurs de menu sont disposés horizontalement, la Flèche vers le bas fonctionne comme la Flèche vers la droite décrite ci-dessus, la Flèche vers le haut fonctionne comme la Flèche vers la gauche décrite ci-dessus, et vice versa.
Exemples
<div>
<button id="menubutton" aria-haspopup="true" aria-controls="menu">
<img src="hamburger.svg" alt="Sections de la page" />
</button>
<ul id="menu" role="menu" aria-labelledby="menubutton">
<li role="presentation">
<a role="menuitem" href="#description">Description</a>
</li>
<li role="presentation">
<a role="menuitem" href="#propriétés_états_et_rôles_wai-aria_associés">
Propriétés, états et rôles WAI-ARIA associés
</a>
</li>
<li role="presentation">
<a role="menuitem" href="#interactions_au_clavier">
Interactions au clavier
</a>
</li>
<li role="presentation">
<a role="menuitem" href="#exemples">Exemples</a>
</li>
<li role="presentation">
<a role="menuitem" href="#spécifications">Spécifications</a>
</li>
<li role="presentation">
<a role="menuitem" href="#voir_ausi">Voir aussi</a>
</li>
</ul>
</div>
Spécifications
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA)> # menuitem> |
Unknown specification> |