ARIA : rôle menu
Le rôle menu
est un type de widget composite qui offre une liste de choix à l'utilisateur·ice.
Description
Un menu
représente généralement un regroupement d'actions ou de fonctions courantes que l'utilisateur·ice peut invoquer. Le rôle menu
est approprié lorsqu'une liste d'éléments de menu est présentée d'une manière similaire à un menu dans une application de bureau. Les sous-menus, également connus sous le nom de menus contextuels, ont également le rôle menu
.
Bien que le terme « menu » soit un terme générique utilisé pour décrire la navigation sur un site, le rôle menu
est destiné à une liste d'actions ou de fonctions qui nécessitent une fonctionnalité complexe, telle que la gestion de la sélection des widgets composites et la navigation par première lettre.
Un menu peut être une liste de contrôles toujours visible ou un widget qui peut être ouvert et fermé. Un widget menu
fermé est généralement ouvert, ou rendu visible, en activant un bouton de menu, en choisissant un élément dans un menu qui ouvre un sous-menu, ou en invoquant une commande, telle que Shift + F10 sous Windows, qui ouvre un menu contextuel.
Lorsqu'un utilisateur·ice active un choix dans un menu qui a été ouvert, le menu se ferme généralement. Si l'action de choix du menu invoque un sous-menu, le menu restera ouvert et le sous-menu sera affiché.
Lorsqu'un menu s'ouvre, la sélection du clavier est placée sur le premier élément de menu. Pour être accessible au clavier, vous devez gérer la sélection (angl.) pour tous les éléments descendants : tous les éléments de menu dans le menu
sont sélectionnables. Le bouton de menu qui ouvre le menu et les éléments de menu, plutôt que le menu lui-même, sont les éléments sélectionnables.
Les éléments de menu incluent menuitem
, menuitemcheckbox
et menuitemradio
. Les éléments de menu désactivés sont sélectionnables mais ne peuvent pas être activés.
Les éléments de menu peuvent être regroupés dans des éléments avec le rôle group
et séparés par des éléments avec le rôle separator
. Ni group
ni separator
ne reçoivent la sélection ou ne sont interactifs.
Si un menu
est ouvert à la suite d'une action contextuelle, Échap ou Entrée peuvent ramener la sélection au contexte d'invocation. Si la sélection était sur le bouton de menu, Entrée ouvre le menu, donnant la sélection au premier élément de menu. Si la sélection est sur le menu lui-même, Échap ferme le menu et ramène la sélection au bouton de menu ou à l'élément parent de la barre de menu (ou à l'action contextuelle qui a ouvert le menu).
Les éléments avec le rôle menu
ont une valeur implicite de aria-orientation
de vertical
. Pour un menu orienté horizontalement, utilisez aria-orientation="horizontal"
.
Si le menu est visuellement persistant, envisagez d'utiliser le rôle menubar
à la place.
Propriétés, états et rôles WAI-ARIA associés
-
Rôles des éléments contenus dans un
menu
oumenubar
contenant, connus collectivement sous le nom d'« éléments de menu ». Ceux-ci doivent être capables de recevoir la sélection. - le rôle
group
-
Les éléments de menu peuvent être imbriqués dans un
group
. - le rôle
separator
-
Un séparateur qui sépare et distingue les sections de contenu ou les groupes d'éléments de menu au sein du menu.
- l'attribut
tabindex
-
Le conteneur
menu
atabindex
défini sur-1
ou0
et chaque élément du menu atabindex
défini sur-1
. aria-activedescendant
-
Défini sur l'ID de l'élément focalisé, s'il y en a un.
aria-orientation
-
Indique si l'orientation du menu est horizontale ou verticale ; par défaut, elle est
verticale
si omise. aria-label
ouaria-labelledby
-
Le
menu
doit avoir un nom accessible. Utilisezaria-labelledby
si un label visible est présent, sinon utilisezaria-label
. Incluez soitaria-labelledby
défini sur l'id
de l'menuitem
ou dubutton
qui contrôle son affichage, soit utilisezaria-label
pour définir le label. aria-owns
-
Défini uniquement sur le conteneur de menu pour inclure des éléments qui ne sont pas des enfants DOM du conteneur. Si défini, 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. Lors de la gestion du focus, assurez-vous que l'ordre de focus visuel correspond à cet ordre de lecture de la technologie d'assistance.
Interactions au clavier
- Espace / Entrée
-
Si l'élément est un élément de menu parent, il ouvre le sous-menu et déplace la sélection sur le premier élément du sous-menu. Sinon, il active l'élément de menu, ce qui charge un nouveau contenu et place la sélection sur le titre de ce contenu.
- Échap
-
Lorsqu'il se trouve dans un sous-menu, il ferme le sous-menu et déplace la sélection sur l'élément de menu ou de barre de menu parent.
- Flèche droite
-
Dans une barre de menu, déplace la sélection sur l'élément suivant de la barre de menu. Si la sélection est sur le dernier élément, il déplace la sélection sur le premier élément. Si dans un sous-menu, si la sélection est sur un élément qui n'a pas de sous-menu, il ferme le sous-menu et déplace la sélection sur l'élément suivant de la barre de menu. Sinon, il ouvre le sous-menu de l'élément de barre de menu nouvellement focalisé, en gardant la sélection sur cet élément de barre de menu parent. S'il n'est pas dans une barre de menu ou un sous-menu et n'est pas sur un
menuitem
avec un sous-menu, si la sélection n'est pas le dernier élément sélectionnable du menu, il déplace éventuellement la sélection sur le prochain élément sélectionnable. - Flèche gauche
-
Déplace la sélection sur l'élément précédent de la barre de menu. Si la sélection est sur le premier élément, il déplace la sélection sur le dernier élément. Si dans un sous-menu, il ferme le sous-menu et déplace la sélection sur l'élément de menu parent. S'il n'est pas dans une barre de menu ou un sous-menu, si la sélection n'est pas le premier élément sélectionnable du menu, il déplace éventuellement la sélection sur le dernier élément sélectionnable.
- Flèche bas
-
Ouvre le sous-menu et déplace la sélection sur le premier élément du sous-menu.
- Flèche haut
-
Ouvre le sous-menu et déplace la sélection sur le dernier élément du sous-menu.
- Début
-
Déplace la sélection sur le premier élément de la barre de menu.
- Fin
-
Déplace la sélection sur le dernier élément de la barre de menu.
- N'importe quelle touche de caractère
-
Déplace la sélection sur le prochain élément de la barre de menu ayant un nom commençant par le caractère tapé. Si aucun des éléments n'a un nom commençant par le caractère tapé, la sélection ne se déplace pas.
Exemples
Voici deux exemples d'implémentations de menus.
Exemple 1 : menu de navigation
<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>
Pour améliorer progressivement ce widget de navigation qui est par défaut accessible, la classe pour masquer le menu
et l'inclusion de tabindex="-1"
sur le contenu interactif de l'élément de menu doivent être ajoutées avec JavaScript au chargement.
Quand on inclut un « menu » pour la navigation du site, il ne faut pas utiliser le rôle menu
. Au lieu de cela, pour la navigation principale du site, utilisez l'élément HTML natif <nav>
ou simplement une liste de liens. Le rôle menu
doit être réservé aux widgets composites nécessitant une gestion de la sélection. Voir Pratiques ARIA pour la navigation dans les informations divulguées (angl.) pour une explication et des exemples supplémentaires.
Exemple 2 : sélecteur d'options de sous-menu de barre de menu
Le code suivant est un menu contextuel imbriqué dans une barre de menu. Il s'affiche lorsque le bouton de menu est activé. C'est un menu pour sélectionner la couleur du texte à partir d'une liste d'options de couleur :
<div>
<button
type="button"
aria-haspopup="menu"
aria-controls="colormenu"
tabindex="0"
aria-label="Couleur du texte : violet">
Violet
</button>
<ul role="menu" id="colormenu" aria-label="Options de couleur" tabindex="-1">
<li
role="menuitemradio"
aria-checked="true"
style="color: purple"
tabindex="-1">
Violet
</li>
<li
role="menuitemradio"
aria-checked="false"
style="color: magenta"
tabindex="-1">
Magenta
</li>
<li
role="menuitemradio"
aria-checked="false"
style="color: black"
tabindex="-1">
Noir
</li>
</ul>
</div>
Le bouton qui ouvre le menu a aria-haspopup="menu"
défini, indiquant explicitement que le popup qu'il contrôle est un menu
.
Pour qu'un menu s'ouvre, l'utilisateur interagit généralement avec un bouton de menu en tant qu'élément déclencheur. Le bouton de menu doit être sélectionnable et répondre à la fois aux événements de clic et aux événements clavier. Lorsqu'il est sélectionné, le fait de choisir Entrée, Espace, Flèche vers le bas ou Flèche vers le haut doit ouvrir le menu et placer la sélection sur un élément de menu.
L'ouverture et la fermeture du menu basculent l'attribut aria-expanded="true"
sur le bouton. Il est ajouté lorsque le menu est ouvert. Supprimé ou défini sur false
lorsque le menu est fermé. La valeur true
indique que le menu est affiché et que l'activation du bouton de menu ferme le menu.
Lorsque le menu est ouvert, le bouton lui-même ne reçoit généralement pas la sélection, car les utilisateurs naviguent à travers les éléments du menu. Au lieu de cela, Échap et éventuellement Maj + Tab ferment le menu et renvoient la sélection au bouton de menu.
Le rôle menu
a été défini sur le <ul>
, identifiant l'élément <ul>
comme un menu.
L'affichage et la dissimulation du menu peuvent être effectués avec CSS. Par exemple, dans ces exemples de code, nous pouvons utiliser les sélecteurs d'attribut et de frère suivant pour basculer la visibilité du menu :
[role="menu"] {
display: none;
}
[aria-expanded="true"] + [role="menu"] {
display: block;
}
L'exemple de navigation a un bouton statique. L'exemple de sous-menu a un bouton qui est mis à jour lorsque l'utilisateur·ice sélectionne une nouvelle valeur. Dans ce cas, l'attribut aria-label="Couleur du texte : violet"
est défini sur l'élément menu
. Il définit le nom accessible pour le menu comme « Couleur du texte : violet » ; identifiant l'objectif du menu (sélectionner une couleur de texte) et la valeur actuelle (violet). Lorsqu'une nouvelle couleur est sélectionnée, la valeur de la propriété aria-label
doit également être mise à jour.
Spécifications
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA)> # menu> |
Unknown specification> |