Menu hamburger

Sommaire

Principe.
Socle HTML.
Rôles, états et propriétés ARIA.
Interactions au clavier.
Comportements attendus.
Remarque.

Principe

Un menu hamburger se présente généralement sous la forme d’un bouton icône qui permet d’afficher un menu.

Socle HTML

<nav role="navigation" aria-label="Menu principal">
  <button aria-expanded="true">
    <svg aria-hidden="true" focusable="false">[…]</svg>
    Menu
  </button>
  <ul class="visible">
    [Menu de navigation principal]
  </ul>
</nav>

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

La balise <nav role="navigation"> doit être utilisée pour structurer le menu et le bouton hamburger.
L’attribut aria-label doit être intégré dans cette même balise <nav role="navigation"> et renseigné avec le nom du menu correspondant (par exemple aria-label="Menu principal").
Le bouton hamburger doit être balisé avec une balise <button>.
L’attribut aria-expanded doit être appliqué sur le bouton hamburger qui contrôle le menu. Sa valeur doit être renseignée dynamiquement en fonction de l’état du menu :
- aria-expanded="true" lorsque le menu est déplié.
- aria-expanded="false" lorsque le menu est plié.

Interactions au clavier

`Entrée` et `Espace`

Lorsque le focus clavier est positionné sur le bouton hamburger, affiche/masque alternativement le menu.

`Échap`

Si le menu est affiché, ferme ce dernier et déplace le focus clavier sur le bouton hamburger.

Comportements attendus

Lorsque le focus clavier est positionné au niveau du bouton hamburger, il est possible de contrôler l’affichage/masquage du menu avec les touches Espace et Entrée. Pour cela, passer par l’écoute de l’événement click.
Lorsque le menu est plié, il doit être masqué avec display: none; ou visibility: hidden;.
La valeur de l’attribut aria-expanded du bouton hamburger doit être modifiée dynamiquement à chaque changement d’état du menu.

Remarque

Dans le cas particulier où le bouton hamburger n’est pas situé immédiatement avant le code HTML du menu, il sera nécessaire de faciliter l’accès à ce menu :

À l’activation du bouton hamburger, le focus est automatiquement déplacé dans le menu :
- Au niveau du premier élément du menu, si celui-ci est interactif,
- sinon, au niveau du conteneur du menu (en y ajoutant l’attribut tabindex="-1" afin de le rendre focusable).
Lorsque le focus est dans le menu et qu’il en ressort, il devra être placé :
- Au niveau du bouton hamburger, après avoir tabulé en arrière à la suite du premier élément interactif dans le menu.
- Au niveau du prochain élément interactif situé immédiatement après le bouton hamburger dans le code HTML, après avoir tabulé en avant à la suite du dernier élément interactif dans le menu.
Lorsque le menu est ouvert, le raccourci Échap devra permettre de le refermer, en repositionnant le focus au niveau du bouton hamburger.
Associer le bouton hamburger à son menu par l’intermédiaire de l’attribut aria-controls :
- Le menu doit posséder un attribut id renseigné avec une valeur unique.
- Le bouton hamburger doit posséder un attribut aria-controls renseigné avec la valeur de l’attribut id du menu.

<nav role="navigation" aria-label="Menu principal">
  <button aria-expanded="true" aria-controls="menu-principal">
    <svg aria-hidden="true" focusable="false">[…]</svg>
    Menu
  </button>
  […]
  <div id="menu-principal" class="visible" tabindex="-1">
    <p>[Contenu du menu dont le premier élément n'est pas interactif]</p>
  </div>
</nav>

6 commentaires

Par Castilla, le 19 mars 2025 à 11h18.

Bonjour,

Combien de niveaux peut-on intégrer dans un burger menu ? Est-on limité à 2 ou 3 panneaux ?

Répondre
- Par Romain Desjardins (Atalan), le 20 mars 2025 à 5h29.
  
  Bonjour,
  
  En termes d’accessibilité numérique, il n’y a pas de limite aux nombres de niveaux que l’on peut intégrer dans un menu.
  
  Cependant, plus le nombre est élevé, plus le menu sera compliqué à lire et à parcourir, pour tout le monde. Le sujet est donc plutôt lié à l’UX ici.
  
  Belle journée,
  Romain
  
  Répondre
Par Olivier Bartoli, le 24 janvier 2023 à 17h12.

Ce commentaire a été publié il y a plus de 2 ans. Il se peut que son contenu ne soit plus d'actualité.

Dans les exemples en lien, la touche « Échap » ne referme pas le menu…

Répondre
- Par Romain Desjardins (Atalan), le 25 janvier 2023 à 9h54.
  
  Ce commentaire a été publié il y a plus de 2 ans. Il se peut que son contenu ne soit plus d'actualité.
  
  Bonjour Olivier,
  
  Effectivement la touche « Échap » ne fonctionne pas dans le premier lien, en revanche elle est bien fonctionnelle dans le deuxième lien (il faut pour cela bien que le focus soit placé dans le menu).
  
  Dans tous les cas, je vous remercie d’avoir pointé ce problème. Ces exemples ne sont en effet plus totalement conformes depuis la mise à jour du RGAA 4.1, il faudra les modifier.
  
  Voici un exemple conforme de menu déroulant correspondant au motif de conception « Disclosure » dans le guide pratique du développement ARIA, venant du W3C. Vous y trouverez l’ensemble du socle HTML et des interactions et comportements à suivre pour la réalisation d’un menu hamburger.
  
  Bien à vous,
  Romain
  
  Répondre
Par Mous, le 10 mars 2022 à 14h28.

Ce commentaire a été publié il y a plus de 2 ans. Il se peut que son contenu ne soit plus d'actualité.

C’est pour tenir en compte les anciennes versions des navigateurs qui ne prennent pas en charge le role= »navigation » natif de la balise .
Il peut y’avoir des personnes qui utilisent par exemple windows xp et ne pourront pas avoir une mises à jour des dernières versions des navigateurs. Quand on fait de l’accessibilité il faut ratisser large pour qu’un plus grand nombre de personne puisse en bénéficier. Voila , je vous ai exposé ma vision des choses même si le validateur de code HTML w3c dit la même chose que vous

Répondre
Par Olivier, le 21 décembre 2021 à 19h13.

Ce commentaire a été publié il y a plus de 2 ans. Il se peut que son contenu ne soit plus d'actualité.

Pourquoi utiliser le rôle navigation et une balise nav ? Cela fait double emploi.

Répondre