Menu hamburger

Sommaire

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

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 bouton hamburger et le menu.
• 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 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

• 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; et/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 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 :

• 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>
  […]
  <ul id="menu-principal" class="visible">
    [Menu de navigation principal]
  </ul>
</nav>

Composants

4 commentaires

Haut de page