{"id":3025,"date":"2025-02-13T12:44:08","date_gmt":"2025-02-13T11:44:08","guid":{"rendered":"https:\/\/ideance.net\/blog\/?p=3025"},"modified":"2025-07-31T11:37:56","modified_gmt":"2025-07-31T09:37:56","slug":"creer-un-bouton-menu-hamburger-accessible","status":"publish","type":"post","link":"https:\/\/ideance.net\/blog\/en\/3025\/creer-un-bouton-menu-hamburger-accessible\/","title":{"rendered":"Cr\u00e9er un bouton burger accessible"},"content":{"rendered":"
\"\"<\/figure>\n\n\n\n

Les boutons de type burger sont couramment utilis\u00e9s sur mobile pour ouvrir et fermer un menu de navigation principale.<\/p>\n\n\n\n

Dans cet article, nous explorerons comment cr\u00e9er un tel bouton de mani\u00e8re accessible.<\/p>\n\n\n\n

Un article connexe explique \u00e9galement comment cr\u00e9er un menu de navigation accessible<\/a>.<\/p>\n\n\n\n

La structure du bouton burger<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Le bouton burger est impl\u00e9ment\u00e9 avec la balise <button type=\"button\"><\/code> car il d\u00e9clenche une action.<\/strong> Il ouvre la navigation principale.<\/p>\n\n\n\n

Il est g\u00e9n\u00e9ralement repr\u00e9sent\u00e9 par une ic\u00f4ne de trois barres horizontales et permet d’acc\u00e9der \u00e0 la navigation principale.<\/p>\n\n\n\n

Cette ic\u00f4ne peut \u00eatre, par exemple, int\u00e9gr\u00e9e en utilisant <img><\/code>, <svg><\/code> ou en CSS.<\/p>\n\n\n\n

Pour garantir l’accessibilit\u00e9, le bouton doit avoir un intitul\u00e9<\/strong> accessible.
Dans cet exemple, imaginons que ce bouton affiche une image repr\u00e9sentant les trois barres horizontales via la balise <img><\/code>. Nous ajoutons alors une alternative textuelle \u00e0 l’image, par exemple : alt=\"Menu\"<\/code>.
Ainsi, ce bouton b\u00e9n\u00e9ficie d\u00e9sormais d’un intitul\u00e9 accessible gr\u00e2ce \u00e0 l’alternative textuelle de l’image.<\/p>\n\n\n\n

D’autres options consistent \u00e0 ajouter un texte visuellement cach\u00e9 \u00e0 l’aide d’une classe comme visually-hidden<\/a><\/code>, ou encore \u00e0 utiliser l’attribut aria-label<\/code>.<\/p>\n\n\n\n

Pour permettre aux personnes utilisant des technologies d\u2019assistance (tel qu\u2019un lecteur d\u2019\u00e9cran), d\u2019acc\u00e9der rapidement au menu en ciblant les zones de \u00ab navigation \u00bb, le bouton burger doit \u00eatre encapsul\u00e9 dans une balise <nav role=\"navigation\" aria-label=\"Menu principal\"><\/code>.<\/p>\n\n\n\n

Pour obtenir par exemple :<\/p>\n\n\n\n

<nav role="navigation" aria-label="Menu principal">\n  <button type="button">\n    <img src="...\/burger.jpg" alt="Menu">\n  <\/button>\n<\/nav><\/code><\/pre>\n\n\n\n
Il existe deux types de fonctionnalit\u00e9s pour ces boutons :<\/p>\n\n\n\n