Créer un bouton burger accessible

Les boutons de type burger sont couramment utilisés sur mobile pour ouvrir et fermer un menu de navigation principale.

Dans cet article, nous explorerons comment créer un tel bouton de manière accessible.

Un article connexe explique également comment créer un menu de navigation accessible.

La structure du bouton burger

Le bouton burger est implémenté avec la balise <button type="button"> car il déclenche une action. Il ouvre la navigation principale.

Il est généralement représenté par une icône de trois barres horizontales et permet d’accéder à la navigation principale.

Cette icône peut être, par exemple, intégrée en utilisant <img>, <svg> ou en CSS.

Pour garantir l’accessibilité, le bouton doit avoir un intitulé accessible.
Dans cet exemple, imaginons que ce bouton affiche une image représentant les trois barres horizontales via la balise <img>. Nous ajoutons alors une alternative textuelle à l’image, par exemple : alt="Menu".
Ainsi, ce bouton bénéficie désormais d’un intitulé accessible grâce à l’alternative textuelle de l’image.

D’autres options consistent à ajouter un texte visuellement caché à l’aide d’une classe comme visually-hidden, ou encore à utiliser l’attribut aria-label.

Pour permettre aux personnes utilisant des technologies d’assistance (tel qu’un lecteur d’écran), d’accéder rapidement au menu en ciblant les zones de « navigation », le bouton burger doit être encapsulé dans une balise <nav role="navigation" aria-label="Menu principal">.

Pour obtenir par exemple :

<nav role="navigation" aria-label="Menu principal">
  <button type="button">
    <img src=".../burger.jpg" alt="Menu">
  </button>
</nav>

Il existe deux types de fonctionnalités pour ces boutons :

• Ceux qui déplient/replient un panneau de contenus,
• Ceux qui ouvrent/ferment une modale.

Boutons burger dépliant/repliant le menu

Pour une navigation principale située dans un panneau de contenus, ajoutez l’attribut aria-expanded a la structure de votre bouton burger.

Cet attribut permet d’indiquer l’état d’ouverture/fermeture du menu aux lecteurs d’écran.
Cet attribut doit être dynamique :

• aria-expanded="false" lorsque le menu est masqué,
• aria-expanded="true" lorsque le menu est affiché.

Lorsque la liste du menu est masquée, elle doit être masquée visuellement et pour les technologies d’assistance. Pour masquer le liste du menu aux technologies d’assistances, vous pouvez par exemple utiliser CSS avec la déclaration display:none ou visibility:hidden.
Une autre solution consiste à utiliser aria-hidden="true" et tabindex="-1" sur les éléments interactifs (boutons, liens, etc.)

La liste du menu doit être placée juste après le bouton burger dans le code source, afin d’assurer un ordre logique lors de la navigation au clavier.

Le bouton déclenchant l’action de déplier la liste du menu doit aussi permettre de replier le contenu.

Pour obtenir, par exemple, lorsque la navigation principale est repliée :

<nav role="navigation" aria-label="Menu principal">
  <button type="button" aria-expanded="false">
    <img src=".../burger.jpg" alt="Menu">
  </button>
  <ul style="display:none">[...]</ul>
</nav>

Boutons burger ouvrant/fermant une fenêtre modale

Pour une navigation principale située dans une modale, ajoutez l’attribut aria-haspopup="dialog" à la structure de votre bouton burger.

Enveloppez la liste du menu dans une balise <div role="dialog" aria-modal="true">.

Ajoutez tabindex="-1" à la balise <div role="dialog" aria-modal="true"> pour déplacer le focus dans la modale. Assurez-vous que le focus reste à l’intérieur de la modale et qu’il est impossible de naviguer en arrière-plan. Pour tester, utiliser la touche TAB de votre clavier.

Une autre possibilité est d’envelopper la liste du menu dans une balise native <dialog>.

Il est indispensable de permettre la fermeture de la fenêtre modale. Pour cela, un bouton dédié avec un intitulé accessible est nécessaire. Si le bouton est représenté par une image, ajoutez par exemple une alternative à l’image pour décrire son action.

Pour obtenir par exemple :

<nav role="navigation" aria-label="Menu principal">
  <button type="button" aria-haspopup="dialog">
    <img src=".../burger.jpg" alt="Menu">
  </button>
</nav>
<div  role="dialog" aria-modal="true" tabindex="-1">
  <button type="button">
    <img src=".../cross.jpg" alt="Fermer le menu">
  </button>
  <ul>[...]</ul>
</div>

Interactions clavier

Le bouton burger doit pouvoir recevoir le focus de navigation, pour cela essayer de naviguer avec la touche TAB.

Les touches Espace et Entrée doivent enclencher les boutons.

Il est recommandé :

• De permettre à la touche Échap (Escape) de fermer le menu et de ramener le focus sur le bouton qui a déclenché l’action initiale,
• De fermer automatiquement le menu lorsque le focus quitte la zone de navigation pour les sous-menus implémenter avec un panneau déplier/plier.

Tous les éléments interactifs dans la navigation principale, tels que les boutons et liens par exemple, doivent recevoir le focus de navigation lorsque le menu est ouvert.

Conclusion

Pour concevoir un bouton de menu burger accessible :

• Utiliser une balise <button type="button"> pour structurer le bouton burger,
• Fournir un intitulé accessible (visible ou cachée) à ce bouton burger,
• Ignorer les images décoratives si elles sont présentes,
• Savoir différencier si le bouton déplie/replie un panneau de contenu ou s’il ouvre une fenêtre modale,
• Vérifier les interactions au clavier.

Si le bouton déplie/replie un panneau de contenu :

• Utiliser l’attribut aria-expanded pour indiquer l’état de la navigation principale (dépliée ou repliée),
• Masquer la liste du menu tant que le bouton menu burger n’a pas été enclenché,
• Assurez-vous que l’ordre de tabulation est logique.

Si le bouton ouvre une fenêtre modale :

• Ajouter l’attribut aria-haspopup="dialog" à votre bouton burger,
• Structurer la liste du menu dans une fenêtre modale avec les attributs role="dialog" et aria-modal="true" ou dans une balise <dialog>,
• Lorsque le bouton burger est activé, la fenêtre modale doit s’ouvrir et le focus doit être déplacé à l’intérieur et y rester jusqu’à ce que la fenêtre modale est fermée,
• Un bouton de fermeture doit être proposé au sein de cette fenêtre modale.

Ces conseils peuvent guider la création d’un bouton de menu burger, mais aussi servir à corriger un bouton déjà existant.

Sources : Disclosure (Show/Hide) Pattern et Dialog (Modal) Pattern