Menu hamburger en accordéon

Un menu hamburger sert à afficher ou à masquer la navigation d’un site Web (généralement, la navigation principale). Il est constitué de deux parties : un bouton déclencheur et le menu dont il contrôle l’affichage.  Ce composant est très populaire dans les interfaces mobiles de sites Web. Il tire son nom d’une icône souvent employée pour illustrer le bouton : trois lignes superposées, qui évoquent les étages d’un hamburger.

La création d’un menu hamburger accessible peut se baser sur l’une ou l’autre des approches suivantes :

1. Le principe des accordéons; ou
2. Le principe des boîtes de dialogue.

C’est le principe des accordéons qui est exemplifié et documenté dans la présente fiche. Le bouton hamburger permet d’étendre ou de réduire la zone de navigation principale d’un site Web. Tout en reprenant des principes d’accessibilité déjà couverts dans la fiche Accordéons, ce composant comporte quelques requis additionnels, notamment pour les interactions au clavier.

Voici les principaux comportements attendus avec les outils d’adaptation (lecteurs d’écran, commandes vocales, etc.) ainsi que la navigation au clavier :

• Le menu hamburger s’ouvre ou se ferme à l’aide d’un bouton et non d’un lien.
• Le bouton possède un nom accessible évocateur de sa fonction (ex. : « Menu »).
• Les éléments du menu sont structurés sous forme de liste.
• Le bouton hamburger et son menu se trouvent dans une même région de navigation, annoncée par les lecteurs d’écran.
  • Remarque : La présence du bouton à l’intérieur de la région est importante pour maintenir cette région perceptible par les lecteurs d’écran lorsque le menu est réduit. 
• Le bouton hamburger est focusable au clavier et s’active avec la touche Entrée ou la barre d’espacement.
• L’état étendu ou réduit est communiqué aux lecteurs d’écran lorsque le focus atteint le bouton.
• Tout changement d’état résultant de l’activation du bouton est immédiatement annoncé par les lecteurs d’écran.
• Le menu hamburger peut se fermer avec la touche Échap et le focus retourne sur son bouton déclencheur.
  • (Recommandé) Si un menu hamburger héberge lui-même des menus accordéons, on suggère de gérer d’abord la fermeture de l’accordéon actuel en focus, avant de fermer le menu hamburger. Le détail des comportements de fermeture avec la touche Échap est fourni dans les explications techniques.
• Lorsque le menu hamburger est ouvert, le focus demeure sur le bouton déclencheur, car l’annonce du changement d’état suffit à confirmer le résultat de l’action. C’est l’utilisateur qui déplace le focus pour parcourir le menu.
• Lorsque le menu hamburger est fermé, la navigation n’est pas exposée aux outils d’adaptation et ses contenus ne font pas partie du parcours au clavier.

Autres points à surveiller

• Si le bouton du menu hamburger a un libellé textuel visible, ce bouton peut être activé avec des outils de commandes vocales, lorsqu’on dicte les mots de ce libellé.

Rôles, états et propriétés ARIA

• Le bouton hamburger et son menu sont placés dans une même région de navigation (balise <nav>, ou élément auquel on a assigné role="navigation").
• (Bonne pratique) La région de navigation reçoit un attribut aria-label dont la valeur précise le type de navigation (ex. : aria-label="Navigation principale").
• Le bouton hamburger est codé avec la balise <button> (ou encore, est un élément auquel on a assigné  role="button").
• Les éléments du menu sont structurés sous forme de liste (balises <ul> et <li>).
• Si le menu hamburger est ouvert, l’élément button a l’attribut aria-expanded défini sur true. Si le menu est fermé, aria-expanded est défini sur false.
• (Optionnel) Le bouton hamburger est associé à son menu depuis l’attribut aria-controls. La valeur de cet attribut correspond à l’identifiant unique (ID) donné à la balise de liste (<ul>) du menu.
  • Remarque : L’usage de cet attribut fait l’objet de certaines réserves pour des composants utilisant le principe des accordéons. Voir à ce sujet la fiche Accordéons.

Autres considérations techniques

• Les principaux aspects gérés par JavaScript sont :
  • L’ouverture et la fermeture du menu hamburger, déclenchés par l’activation du bouton.
  • Le changement dynamique de la valeur de l’attribut aria-expanded, pour déclarer l’état étendu (true) ou réduit (false).
  • Les comportements de fermeture du menu hamburger avec la touche Échap.
• Lorsque le bouton est codé avec la balise <button>, il répond d’emblée aux interactions clavier décrites dans les critères fonctionnels. Cependant, si le bouton est un autre élément HTML auquel on a assigné role="button", tous ces comportements doivent être recréés avec JavaScript. Au besoin, l’élément est rendu focusable avec tabindex="0".
• Lorsqu’un libellé textuel visible figure dans le bouton hamburger :
  • Le nom accessible du bouton reprend tous les mots du libellé visible (ex. « Menu »), dans le même ordre relatif, afin d’en permettre l’activation par commandes vocales.
  • L’icône qui accompagne le libellé textuel reçoit un traitement décoratif (ex. : alt="" ou aria-hidden="true").
• La mise en forme CSS display:none est appliquée au menu fermé. Cela permet de masquer ses contenus aux outils d’adaptation et évite qu’ils ne soient inclus dans le parcours de tabulation.
• (À surveiller) Certains lecteurs d’écran comme NVDA peuvent éprouver des difficultés à intercepter correctement l’état du bouton hamburger lors d’une fermeture avec Échap, en raison de la manière dont ils exécutent leurs séquences de rétroactions. Si ce problème survient, il est possible de prévoir un très léger délai d’exécution du script (setTimeout()) entre le changement d’état (via l’attribut aria-expanded) et le moment où se produisent la fermeture du menu et le retour de focus sur le bouton. Un délai d’une miliseconde est généralement suffisant et sera imperceptible pour les utilisateurs, tout en assurant une séquence d’exécution correcte.

Comportements de fermeture du menu hamburger avec la touche Échap

Voici les comportements à implémenter lors d’un emploi de la touche Échap. Ceux-ci dépendent du contexte actif au moment de l’interaction clavier.

• Cas 1 : le focus clavier est sur le bouton hamburger.
  • Le menu hamburger se ferme immédiatement et le focus demeure sur le bouton.
• Cas 2 : le focus clavier est à l’intérieur du menu hamburger.
  • Si le focus clavier N’EST PAS sur un accordéon ouvert (son bouton ou son menu) : le menu hamburger se ferme immédiatement et le focus revient sur le bouton hamburger. 
  • Si le focus clavier EST sur un accordéon ouvert :
    • La touche Échap referme d’abord cet accordéon et le focus est placé sur son bouton déclencheur.
    • Quand il n’y a plus d’accordéon ouvert en focus, le menu hamburger se ferme selon le principe décrit plus tôt.

Cette séquence suppose que le menu hamburger peut se fermer même si un accordéon est encore ouvert, du moment que cet accordéon n’a pas le focus clavier au moment d’appuyer sur Échap.

Libellé du bouton hamburger

Certaines clientèles peuvent éprouver des difficultés à comprendre la fonction du bouton hamburger sur la simple base de son icône. Pour rendre cette fonction plus explicite, on recommande d’accompagner l’icône d’un libellé textuel (ex. : « Menu »), visible et perceptible pour l’ensemble des internautes.

Par ailleurs, puisque le changement d’état du bouton est communiqué par l’attribut aria-expanded, il faut éviter d’introduire cette information dans le nom accessible du bouton. Dans le cas contraire, cela peut générer de la confusion, comme en témoignent les exemples suivants :

Bon exemple de libellé

Le bouton représenté par les extraits de code ci-dessous sera lu : « Bouton menu réduit » ou « Bouton menu étendu », selon le changement d’état.

<button aria-expanded="false"><svg aria-hidden="true" focusable="false">[…]</svg> Menu</button>

<button aria-expanded="true"><svg aria-hidden="true" focusable="false">[…]</svg> Menu</button>

Mauvais exemples de libellés

Le bouton représenté par les extraits de code ci-dessous sera lu : « Bouton ouvrir le menu réduit » ou « Bouton fermer le menu étendu », selon le changement d’état. Cette accumulation d’informations est beaucoup moins claire. Il faut donc éviter de changer en même temps le libellé du bouton et son attribut d’état.

<button aria-expanded="false" aria-label="Ouvrir le menu"><svg aria-hidden="true" focusable="false">[…]</svg> Menu</button>

<button aria-expanded="true" aria-label="Fermer le menu"><svg aria-hidden="true" focusable="false">[…]</svg> Menu</button>

Comportements de JAWS et NVDA lors de la fermeture avec Échap

Les enjeux sont comparables à ceux documentés dans la fiche Menus déroulants en accordéons.

Fermeture par incréments du menu dans iOS et MacOS

L’enjeu qui suit concerne uniquement les menus hamburger qui contiennent des menus accordéons.

• Environnement d’observation : Versions les plus récentes de iOS, MacOS, Safari et Chrome en date du 21 mars 2025. Navigation au clavier avec et sans VoiceOver. Utilisation de la gestuelle Z dans l’environnement iOS.
• Résumé du problème :
  • Sur iOS, le menu hamburger peut être fermé avec la touche Échap ou la gestuelle Z de VoiceOver. Cependant, ce comportement se produit sans respecter la logique de fermeture par incréments des menus accordéons. 
  • Lors d’un emploi de la gestuelle Z, VoiceOver iOS priorise la fonctionnalité native de retour à la page précédente avant la fermeture d’un accordéon en focus, sauf si aucune page précédente ne figure dans l’onglet ouvert.
  • Sur MacOs, la fermeture par incréments demeure respectée si on navigue dans le menu avec Tabulation avant d’appuyer sur Échap. Cependant, avec VoiceOver, la fermeture par incréments n’est pas toujours respectée. Lorsqu’on navigue avec les touches directionnelles plutôt que Tabulation, le menu hamburger se referme d’un seul coup si on appuie sur Échap à l’intérieur d’un accordéon.
• Comportement attendu : La fermeture par incréments devrait être respectée peu importe le mode de navigation et de manière cohérente entre iOS et MacOs.
• Pistes et analyses techniques : 
  • Dans le cas d’iOS, le problème fait écho à une limitation technique connue de cet environnement. Les événements clavier (commekeydown pour la touche Échap) ne sont pas toujours propagés correctement jusqu’aux conteneurs parents dans les structures de menus complexes. Au lieu de cela, l’événement est déclenché uniquement sur l’élément ayant le focus, sans que le système ne permette toujours de remonter jusqu’aux couches supérieures du composant. Cette limitation affecte directement les composants qui s’appuient sur une logique d’analyse du contexte actif dans une arborescence.
  • Par ailleurs, contrairement à une croyance populaire, la gestuelle Z ne constitue pas un équivalent direct de la touche Échap, même si elle partage certaines similitudes. La définition officielle fournie par Apple est d’ailleurs : « Fermer une alerte ou revenir à l’écran précédent ». Cela peut expliquer la priorisation du retour en page précédente.
• Impact estimé : Modéré. La fermeture globale du menu hamburger demeure possible au clavier. De plus, la fermeture par incréments relève d’une bonne pratique.
• Décision : L’ajout de correctifs spécifiques, bien qu’exploré en profondeur, impliquerait de recourir à des pratiques peu optimales et non recommandées, affectant la robustesse et la prévisibilité de la navigation clavier. Nous avons choisi de maintenir la fermeture par incréments, tout en rapportant les limites rencontrées, qui ne sont pas spécifiques à notre composant.

Le code employé est une conception du Regroupement des aveugles et amblyopes du Montréal métropolitain (RAAMM).

Pour le moment, l’exemple utilise la bibliothèque JavaScript jQuery. Une version en JavaScript Vanille sera également fournie sous peu.

Notons que le script de l’exemple combine les fonctionnalités du menu hamburger à celles des menus déroulants, pour illustrer une gestion harmonisée de ces composants en affichage adaptatif. Il demeure toutefois possible d’employer un menu hamburger avec de simples liens de navigation.