Menu hamburger
Sommaire
- Socle HTML.
- Rôles, états et propriétés ARIA.
- Interactions au clavier.
- Comportements attendus.
- Remarque.
- Composants.
Socle HTML
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 exemplearia-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/ouvisibility: 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’attributid
du menu.
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.