Menu hamburger

Sommaire

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

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 focus clavier est positionné sur l’un des éléments du menu, déplace le focus clavier sur le bouton hamburger qui a déclenché l’affichage du menu, puis ferme ce dernier.

Comportements attendus

Remarque

Dans le cas particulier où le bouton hamburger n’est pas situé immédiatement avant le code HTML du menu, il est important d’associer techniquement le menu au bouton hamburger qui le contrôle.

Cette association doit être déclarée par l’intermédiaire de l’attribut aria-controls :

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

Composants

Ces composants « Menu hamburger » sont proposés ici car leur niveau d’accessibilité est jugé bon ou très bon.

Toutefois, avant de les utiliser dans votre projet, il est important de vérifier le respect des spécifications présentées ci-avant. Certains pouvant nécessiter quelques ajustements.

Commentaires

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page