Composant accessible · outil gratuit

Menu de navigation accessible avec sous-menus : code vérifié

Un menu de site accessible est un <nav> qui contient une liste de liens. Chaque sous-menu s'ouvre avec un vrai bouton (aria-expanded indique s'il est ouvert), pas au seul survol de la souris : il fonctionne alors au clavier, au toucher et au lecteur d'écran. Échap le referme et rend le focus au bouton.

Critères RGAA 4.1.2 : 9.2, 9.3, 7.1, 7.3, 10.14, 12.11 · WCAG 2.2 : 1.3.1, 2.1.1, 4.1.2, 1.4.13 · mis à jour le 2 novembre 2026.

Générer et vérifier le composant

Réglez le composant : le code se met à jour, l'aperçu fonctionne pour de vrai, et chaque version est vérifiée en direct par les contrôles du composant, un test de comportement et axe-core. « Introduire une erreur fréquente » montre ce que chaque contrôle détecte ; « Tester mon code » vérifie le vôtre.

Réglages

Rubriques (« Rubrique : lien, lien », une par ligne)

Nom de la navigation

Introduire une erreur fréquente

Pour voir le contrôle qui la détecte (les erreurs de comportement apparaissent avec « Tester le comportement »).

<nav class="menu" aria-label="Principal">
  <ul class="menu-niveau1">
    <li>
      <button type="button" class="menu-bouton" aria-expanded="false" aria-controls="sm-produits">Produits</button>
      <ul class="menu-sous" id="sm-produits" hidden>
        <li><a href="#">Logiciels</a></li>
        <li><a href="#">Matériel</a></li>
        <li><a href="#">Accessoires</a></li>
      </ul>
    </li>
    <li>
      <button type="button" class="menu-bouton" aria-expanded="false" aria-controls="sm-services">Services</button>
      <ul class="menu-sous" id="sm-services" hidden>
        <li><a href="#">Conseil</a></li>
        <li><a href="#">Formation</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<p class="suite">Contenu de la page.</p>

Aperçu réel (utilisable à la souris et au clavier)

Vérification en direct

Qui est gêné quand le composant est mal fait

Personnes qui naviguent au clavier : un sous-menu qui n'apparaît qu'au survol de la souris leur reste fermé : les pages qu'il contient sont inaccessibles.
Personnes sur écran tactile : il n'y a pas de survol : sans bouton, le sous-menu ne s'ouvre pas, ou le premier toucher suit le lien.
Personnes aveugles : sans aria-expanded, elles ne savent pas si un sous-menu s'est ouvert après leur action.
Personnes ayant des tremblements : un menu qui se ferme dès que la souris sort de la zone est difficile à utiliser ; un bouton le garde ouvert.

Le comportement attendu

Au clavier

Touche ou moment	Ce qui doit se passer
Tab	Parcourt les rubriques ; dans un sous-menu ouvert, parcourt ses liens.
Entrée ou Espace sur une rubrique	Ouvre ou ferme son sous-menu ; aria-expanded passe à true ou false.
Échap	Ferme le sous-menu ouvert et rend le focus à son bouton.

Avec un lecteur d'écran

La zone est annoncée « Principal, navigation », puis « liste de 3 éléments ».
Chaque rubrique est annoncée « Produits, bouton, réduit », puis « développé » une fois ouverte.
Les liens du sous-menu sont lus comme une liste imbriquée.

Les erreurs les plus fréquentes

Des sous-menus au seul survol. li:hover > ul en CSS : invisibles au clavier et au toucher (critères 10.14 et 12.11).
role="menu" pour un menu de site. Ce rôle impose une navigation aux flèches propre aux menus d'application : pour la navigation d'un site, une liste de liens avec des boutons suffit.
Un lien parent qui ouvre aussi le sous-menu. Un même élément ne peut pas à la fois mener à une page et ouvrir une liste : séparez le lien et le bouton.
Un état non annoncé. Le bouton n'a pas aria-expanded : le lecteur d'écran ne dit pas si le sous-menu est ouvert.

Tester soi-même

Avec Tab, atteignez une rubrique et appuyez sur Entrée : le sous-menu doit s'ouvrir, et Tab doit entrer dans ses liens.
Appuyez sur Échap : il doit se fermer et le focus revenir sur la rubrique.
Sur un téléphone, touchez une rubrique : le sous-menu doit s'ouvrir sans quitter la page.
Avec un lecteur d'écran, vérifiez l'annonce « réduit » puis « développé ».

Ce qu'Accessia détecte dans un audit

Accessia relève les zones de navigation et leur nom dans les preuves du rapport (critère 9.2, revue express par l'IA) et signale automatiquement les boutons sans nom (critère 11.9). La « Simulation des troubles » de l'extension Chrome (Motricité, clavier seul) aide à repérer les sous-menus inaccessibles sans souris. L'ouverture au clavier se vérifie en utilisant le menu : c'est ce que fait le test de comportement ci-dessus.

Auditer une page gratuitement, ou vérifiez ce composant directement dans votre éditeur de code avec le serveur MCP d'Accessia.

Critères RGAA concernés

Questions fréquentes

Faut-il role="menu" et role="menuitem" ?

Pas pour un menu de site. Ces rôles servent aux menus d'application (comme celui d'un logiciel) et exigent une navigation aux flèches. Une liste de liens avec des boutons d'ouverture est plus simple et mieux restituée.

Le sous-menu peut-il s'ouvrir au survol en plus ?

Oui, en complément du bouton. Il doit alors rester ouvert le temps d'y amener la souris et pouvoir être fermé (critère 10.13).

Que faire du lien de la rubrique parente ?

Si la rubrique a sa propre page, mettez un lien vers elle en premier élément du sous-menu (« Tous les produits ») ; le bouton ne sert qu'à ouvrir.

Ce code rend-il mon site conforme ?

Il rend ce menu conforme aux contrôles affichés. Il doit ensuite être identique d'une page à l'autre (critère 12.2).