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

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.

4 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
Par Olivier Bartoli, le 24 janvier 2023 à 17h12.

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

Répondre
- Par Romain Desjardins (Atalan), le 25 janvier 2023 à 9h54.
  
  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