menubar

Quand l’utiliser

Pour une barre de menus applicative persistante qui reproduit le menu principal d’une application de bureau (Fichier, Édition, Affichage, …). Les usages les plus légitimes se trouvent dans les outils de création web, les IDE et les applications de productivité plein écran.

Si votre « barre de menus » est en réalité la navigation de l’en-tête d’un site, il ne s’agit PAS d’une menubar. Utilisez <nav> avec <ul> de liens <a>. Le rôle menubar exige un point d’arrêt tabulation unique, une navigation par flèches et une fermeture par Échap — rien de tout cela ne correspond aux attentes des utilisateurs pour un en-tête de site.

Les enfants d’une menubar sont généralement des déclencheurs role="menuitem" qui ouvrent des sous-menus (aria-haspopup="menu").

Contrat clavier + focus

Conformément au modèle APG menubar :

• Tab entre dans la menubar sur le premier élément ou le dernier ciblé ; Tab en sort.
• Les flèches Gauche/Droite déplacent le focus entre les éléments de la menubar au premier niveau (avec retour à la ligne).
• La flèche Bas (ou Entrée/Espace) ouvre le sous-menu de l’élément ciblé et déplace le focus sur son premier menuitem.
• La flèche Haut ouvre le sous-menu et déplace le focus sur le dernier menuitem.
• Échap dans un sous-menu ferme le sous-menu et renvoie le focus vers son élément de la menubar.
• Anticipation de frappe : taper une lettre saute au prochain élément commençant par cette lettre.

Utilisez un tabindex rotatif.

Erreurs courantes

• role="menubar" sur le <nav> principal d’un site. Inadéquation entre le rôle annoncé et les attentes des utilisateurs.
• Chaque élément a tabindex="0", Tab parcourt donc tous les éléments de la menubar. Le modèle est à point d’arrêt unique.
• Sous-menus qui s’ouvrent au survol mais pas avec la flèche Bas.
• Absence de aria-haspopup/aria-expanded sur les éléments de la menubar qui déclenchent des sous-menus.
• Échap dans un sous-menu se replie mais perd le focus — doit renvoyer vers l’élément parent de la menubar.

Exemple

<ul role="menubar" aria-label="Document">
  <li role="menuitem" tabindex="0"  aria-haspopup="menu" aria-expanded="false">File</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Edit</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">View</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Help</li>
</ul>