Créer un menu burger accessible en HTML, CSS et JavaScript (ARIA, RGAA)

Le menu burger est un grand classique du développement frontend. Mais le coder proprement, c'est autre chose.
Dans ce cas pratique, vous allez construire un menu de navigation responsive, accessible et performant en HTML, CSS et JavaScript, sans aucun framework.

L'angle est volontairement professionnel : un HTML sémantique bien structuré, des attributs ARIA correctement posés et le respect du RGAA 4.1. Résultat, une navigation utilisable à la souris, au clavier comme au lecteur d'écran, et qui envoie au passage de bons signaux SEO.

Ce que vous allez mettre en place :

• Une structure HTML5 sémantique claire pour la zone de navigation
• Un design responsive en CSS pensé mobile-first, avec animation fluide d'ouverture
• La gestion dynamique du menu en JavaScript (toggle, états, interactions)
• Les attributs ARIA en pratique : aria-expanded, aria-controls, aria-label, aria-hidden
• Une vraie navigation au clavier avec gestion du focus (focus-visible, outline)

C'est le troisième épisode de la série de Carl Brison sur le HTML sémantique et l'accessibilité. Technicien supérieur en multimédia depuis le début des années 2000, créateur de nombreux sites professionnels et auteur d'ouvrages informatiques publiés aux Éditions Ellipses, il est aussi mentor sur le Parcours développeur web frontend de la plateforme.
À la fin de ce tuto, vous saurez créer des menus de navigation robustes, réutilisables et conformes aux exigences du web actuel.

Prérequis : HTML sémantique (balises de structure, formulaires, liens). Aucune connaissance préalable d'ARIA n'est nécessaire.
Pour aller plus loin : retrouvez Carl Brison comme mentor sur le Parcours développeur web frontend.