Le rôlemenu est un type de widget composite qui offre une liste de choix à l'utilisateur·ice.

Description

Unmenu représente généralement un regroupement d'actions ou de fonctions courantes que l'utilisateur·ice peut invoquer. Le rôlemenu 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ôlemenu.

Bien que le terme « menu » soit un terme générique utilisé pour décrire la navigation sur un site, le rôlemenu 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 widgetmenu 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 queShift + 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 devezgérer la sélection^(angl.) pour tous les éléments descendants : tous les éléments de menu dans lemenu 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 incluentmenuitem,menuitemcheckbox etmenuitemradio. Les éléments de menudé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ôlegroup et séparés par des éléments avec le rôleseparator. Nigroup niseparator ne reçoivent la sélection ou ne sont interactifs.

Si unmenu est ouvert à la suite d'une action contextuelle,Échap ouEntré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ôlemenu ont une valeur implicite dearia-orientation devertical. Pour un menu orienté horizontalement, utilisezaria-orientation="horizontal".

Si le menu est visuellement persistant, envisagez d'utiliser le rôlemenubar à la place.

Propriétés, états et rôles WAI-ARIA associés

les rôlesmenuitem,menuitemcheckbox etmenuitemradio

Rôles des éléments contenus dans unmenu oumenubar contenant, connus collectivement sous le nom d'« éléments de menu ». Ceux-ci doivent être capables de recevoir la sélection.

le rôlegroup

Les éléments de menu peuvent être imbriqués dans ungroup.

le rôleseparator

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'attributtabindex

Le conteneurmenu 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 estverticale si omise.

aria-label ouaria-labelledby

Lemenu 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 unmenuitem 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 aria-haspopup="true" aria-controls="menu">    <img src="hamburger.svg" alt="Sections de la page" />  </button>  <ul 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 lemenu et l'inclusion detabindex="-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ôlemenu. 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ôlemenu doit être réservé aux widgets composites nécessitant une gestion de la sélection. VoirPratiques 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" aria-label="Options de couleur" tabindex="-1">    <li      role="menuitemradio"      aria-checked="true"           tabindex="-1">      Violet    </li>    <li      role="menuitemradio"      aria-checked="false"           tabindex="-1">      Magenta    </li>    <li      role="menuitemradio"      aria-checked="false"           tabindex="-1">      Noir    </li>  </ul></div>

Le bouton qui ouvre le menu aaria-haspopup="menu" défini, indiquant explicitement que le popup qu'il contrôle est unmenu.

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 choisirEntrée,Espace,Flèche vers le bas ouFlè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'attributaria-expanded="true" sur le bouton. Il est ajouté lorsque le menu est ouvert. Supprimé ou défini surfalse lorsque le menu est fermé. La valeurtrue 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 éventuellementMaj + Tab ferment le menu et renvoient la sélection au bouton de menu.

Le rôlemenu 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'attributaria-label="Couleur du texte : violet" est défini sur l'élémentmenu. 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

Voir aussi

• ARIA : rôlemenubar
• ARIA : rôlemenuitem
• ARIA : rôlemenuitemcheckbox
• ARIA : rôlemenuitemradio
• L'attribut ARIAaria-haspopup