menuitem

Quand l’utiliser

Uniquement à l’intérieur d’un role="menu" ou role="menubar", et uniquement lorsque le menu est un menu applicatif — le type qui reproduit la barre Fichier/Édition/Affichage d’une application de bureau, avec point d’arrêt tabulation unique, navigation par flèches et Échap pour fermer.

La navigation principale d’un site n’est PAS un menu. Utilisez <nav> avec un <ul> de liens <a>. La confusion entre les deux est la plus fréquente erreur ARIA sur le web — elle piège les utilisateurs clavier dans une navigation par flèches quand Tab serait plus naturel, et indique aux lecteurs d’écran « menu applicatif » quand le contenu n’est que des liens.

Rôles connexes : menuitemcheckbox (pour les éléments de menu qui basculent) et menuitemradio (pour les choix exclusifs dans un menu).

Contrat clavier + focus

Conformément au modèle APG menu :

• Tab entre dans le menu et en sort — le focus se pose sur le premier menuitem à l’entrée. Tab ne parcourt PAS les éléments.
• Les flèches Haut/Bas déplacent le focus entre les éléments (avec retour à la ligne).
• Droite/Gauche ouvrent les sous-menus / reviennent au parent.
• Entrée ou Espace active l’élément ciblé.
• Échap ferme le menu et renvoie le focus vers le déclencheur.
• Taper une lettre saute au prochain élément commençant par cette lettre (anticipation de frappe).

Utilisez un tabindex rotatif : seul le menuitem actuellement ciblé a tabindex="0" ; les autres ont tabindex="-1".

Erreurs courantes

• Utiliser role="menuitem" pour un lien ordinaire dans la navigation du site. Provoque des pièges clavier et une annonce incorrecte par le lecteur d’écran.
• Chaque menuitem a tabindex="0", Tab parcourt donc chacun d’eux. Le modèle est à point d’arrêt unique.
• Sous-menus qui s’ouvrent au survol mais pas avec la flèche Droite.
• Échap ferme le sous-menu mais perd le focus, laissant l’utilisateur sans repère hors du menu.
• Éléments sans nom accessible parce que l’icône est le seul contenu — ajoutez aria-label.

Exemple

<button id="fileBtn" aria-haspopup="menu" aria-expanded="false" aria-controls="fileMenu">
  File
</button>
<ul id="fileMenu" role="menu" aria-labelledby="fileBtn" hidden>
  <li role="menuitem" tabindex="0">New</li>
  <li role="menuitem" tabindex="-1">Open</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">
    Open recent
  </li>
  <li role="separator"></li>
  <li role="menuitem" tabindex="-1">Save</li>
</ul>