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.

2 commentaires

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

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

    Répondre

  • Par Mous, le 10 mars 2022 à 14h28.

    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

Ajouter un commentaire

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

Haut de page