ARIA : rôle menuitem

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 apparaissent 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

le rôle menu

Un composant fournissant une liste de choix. Rôle de contexte requis (ou menubar).

le rôle 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 (ou menu).

le rôle group

Peut être utilisé pour identifier un ensemble de menuitems connexes dans ou possédés par un menu ou menubar.

aria-disabled

Indique que l'élément est perceptible mais désactivé, donc il n'est pas utilisable.

aria-haspopup

Indique la disponibilité et le type de fenêtre intrusive interactive 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 la sélection 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 un menubar, ouvre le sous-menu et place la sélection sur le premier élément du sous-menu. Sinon, déplace la sélection sur l'élément suivant, en option de l'enveloppement du dernier au premier.

Flèche vers le haut

Déplace la sélection vers l'élément précédent, en option de l'enveloppement du premier au dernier. En option, si le menuitem est dans un menubar et a un sous-menu, ouvre le sous-menu et place la sélection sur le dernier élément du sous-menu.

Flèche vers la droite

Si dans un menu ouvert avec un menubutton et pas dans un menubar, si le menuitem n'a pas de sous-menu, ne fait rien. Lorsque la sélection est dans un menubar, déplace la sélection vers l'élément suivant, en option de l'enveloppement du dernier au premier. Lorsque la sélection est dans un menu et sur un menuitem qui a un sous-menu, ouvre le sous-menu et place la sélection sur son premier élément. Lorsque la sélection est dans un menu et sur un élément qui n'a pas de sous-menu, ferme le sous-menu et tous les menus parents, déplace la sélection vers l'élément suivant dans le menubar, et, si la sélection est maintenant sur un menuitem avec un sous-menu, ouvre soit le sous-menu de ce menuitem sans déplacer la sélection dans le sous-menu, soit ouvre le sous-menu de ce menuitem et place la sélection sur le premier élément du sous-menu.

Flèche vers la gauche

Lorsque la sélection est dans un menubar, déplace la sélection vers l'élément précédent, en option de l'enveloppement du premier au dernier. Lorsque la sélection est dans un sous-menu d'un élément dans un menu, ferme le sous-menu et retourne la sélection au menuitem parent. Lorsque la sélection est dans un sous-menu d'un élément dans un menubar, ferme le sous-menu, déplace la sélection vers l'élément précédent dans le menubar, et, si la sélection est maintenant sur un menuitem avec un sous-menu, ouvre soit le sous-menu de ce menuitem sans déplacer la sélection dans le sous-menu, soit ouvre le sous-menu de ce menuitem et place la sélection sur le premier élément du sous-menu.

Début

Si l'enveloppement des touches fléchées n'est pas pris en charge, déplace la sélection vers le premier élément du menu ou du menubar actuel.

Fin

Si l'enveloppement des touches fléchées n'est pas pris en charge, déplace la sélection vers le dernier élément du menu ou du menubar actuel.

Toute touche correspondant à un caractère imprimable (Optionnel)

Déplace la sélection vers l'élément suivant dans le menu actuel dont l'étiquette commence par ce caractère imprimable.

Échap

Ferme le menu qui contient la sélection et retourne la sélection à 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 la sélection vers l'élément suivant dans la séquence de tabulation, et si l'élément qui avait la sélection n'est pas dans un menubar, ferme son menu et tous les conteneurs de menu parents ouverts.

Maj + Tab

Déplace la sélection vers l'élément précédent dans la séquence de tabulation, et si l'élément qui avait la sélection 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 la sélection à la suite d'une action contextuelle, Échap ou Entrée peut renvoyer la sélection 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

Voir aussi

• ARIA : rôle menuitemcheckbox
• ARIA : rôle menuitemradio
• ARIA : rôle listitem
• ARIA : rôle option