Ce composant permet d'insérer dans une application Web une barre de menus telle qu'on la trouve dans une application classique, comme un traitement de texte ou un client de messagerie.

Restitution

• Chaque entrée de la barre de menu doit posséder un nom accessible (ressource en anglais).
• La présence d'un sous-menu doit être vocalisé.
• Le nombre d'item d'un sous-menu doit être vocalisé.
• L'état sélectionné ou non sélectionné d'une option de sous-menu doit être vocalisé.

Interactions de base au clavier

Les interactions au clavier sont :

• Les flèches droite et gauche permettent d'afficher chaque entrée de la barre de menu et de circuler dans les sous-menus.
• Les flèches haut et bas permettent d'activer chaque entrée d'un sous-menu.
• Les touches Espace et Entrée permettent de sélectionner une option d'un sous-menu.
• Lorsqu'un sous-menu est activé, la touche Échap ferme le sous-menu et redonne le focus sur la première option du menu parent ou l'entrée parente de la barre de menu.
• La touche Tabulation ferme le(s) sous-menu(s) et déplace le focus sur l'élément tabulable suivant ou précédent (Majuscule + Tabulation).

Motif de conception : Menubar (WAI-ARIA Authoring Practices 1.1)

Exemple de barre de menus

Test de la barre de menus avec JAWS

1. Utiliser la touche Tabulation pour atteindre le menu.
   JAWS active le mode formulaire et annonce : « Police, Arial, Verdana, Times New Roman, sous-menu ».
2. Se déplacer avec les flèches droite et gauche.
   JAWS annonce : « styles, gras, italique souligné, sous-menu », « alignement, à gauche, à droite, justifié, sous-menu ».
3. Ouvrir un menu à l'aide de la flèche bas ou de la touche Entrée.
   JAWS annonce par exemple, « Arial, Verdana, Times New Roman ».

Test de la barre de menus avec NVDA

1. Utiliser la touche Tabulation pour atteindre le menu.
   NVDA active le mode formulaire et annonce : « police, sous-menu, 1 sur 3 ».
2. Se déplacer avec les flèches droite et gauche.
   NVDA annonce : « styles, sous-menu 2 sur 3 », « alignement, sous-menu 3 sur 3 ».
3. Ouvrir un menu à l'aide de la flèche bas ou de la touche Entrée.
   NVDA annonce par exemple, « Arial non cochée, 1 sur 3, Verdana non coché, 2 sur 3, Times New Roman non coché 3 sur 3 ».

Test de la barre de menus avec VoiceOver

Les raccourcis suggérés pour ce composant ne permettent pas une restitution fiable par VoiceOver. Il est difficile pour l'utilisateur de comprendre la structure du menu. Le plus simple est de se déplacer dans le menu à l'aide des touches VO + flèches.

1. Utiliser la touche Tabulation pour atteindre le menu.
   VoiceOver annonce : « menu, 3 éléments ».
2. Se déplacer à l'aide des touches VO + flèches.
   VoiceOver annonce les titres de chaque élément et indique : « Vous êtes actuellement dans menu » ou « Vous êtes actuellement sur commande de menus ».
3. Se déplacer avec les flèches droite et gauche. VoiceOver lit les éléments du menu.
4. Pour cocher un élément, appuyer sur Espace pour cocher un élément. VoiceOver ne vocalise pas que l'élément est coché. Il faut revenir sur l'élément pour avoir l'information.
5. Sortir du menu en tabulant.