Comment créer une navigation accessible en HTML

Une navigation accessible en HTML, c’est la base d’un site web inclusif, bien référencé et facile à utiliser pour tout le monde. Pourtant, beaucoup de développeurs et intégrateurs passent à côté de quelques règles simples qui font toute la différence.

Ce guide vous montre, étape par étape, comment structurer un menu de navigation HTML correctement, quels attributs utiliser, et comment respecter les standards d’accessibilité sans vous compliquer la vie.

Que vous soyez débutant ou développeur confirmé, vous trouverez ici des exemples concrets, adaptés à tous les projets, du site vitrine au blog en passant par les interfaces complexes.

Pourquoi l’accessibilité de la navigation HTML est essentielle

Une navigation mal structurée pénalise deux types d’utilisateurs : les personnes en situation de handicap (qui utilisent un lecteur d’écran, un clavier ou une commande vocale) et les moteurs de recherche comme Google, qui explorent votre site de la même façon qu’un agent automatisé.

Une navigation accessible, c’est aussi une navigation mieux comprise, mieux indexée et plus rapide à parcourir pour tout le monde. C’est un gain de temps pour vos utilisateurs et un avantage concret pour votre référencement naturel (SEO).

Voici les principaux bénéfices :

• Meilleure compatibilité avec les lecteurs d’écran (NVDA, JAWS, VoiceOver)
• Navigation possible au clavier, sans souris
• Meilleure structure sémantique pour les moteurs de recherche
• Conformité aux normes WCAG 2.1 (accessibilité web internationale)
• Expérience utilisateur améliorée pour tous les visiteurs

La structure HTML de base d’une navigation accessible

La première règle : utilisez toujours la balise <nav> pour encadrer votre menu principal. C’est un élément sémantique HTML5 reconnu par tous les lecteurs d’écran et moteurs de recherche.

Voici un exemple simple et prêt à l’emploi :

<nav aria-label="Menu principal">
  <ul>
    <li><a href="/">Accueil</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Ce code de base respecte déjà plusieurs critères d’accessibilité : la balise <nav>, une liste ordonnée logique avec <ul> et <li>, et des liens texte clairs.

Pourquoi utiliser aria-label sur la balise nav ?

Si votre page contient plusieurs zones de navigation (menu principal, menu de pied de page, fil d’Ariane…), l’attribut aria-label permet aux lecteurs d’écran de les distinguer clairement. Nommez chaque <nav> de façon descriptive.

Exemples :

• aria-label="Menu principal"
• aria-label="Navigation secondaire"
• aria-label="Pied de page"

Comment rendre la navigation accessible au clavier

Un site accessible doit pouvoir être parcouru entièrement au clavier, sans souris. La bonne nouvelle : si vous utilisez de vraies balises <a> pour vos liens, la navigation clavier fonctionne nativement dans les navigateurs modernes.

Quelques règles pratiques :

• Toujours utiliser <a href="..."> pour les liens de navigation, jamais des <div> ou <span> cliquables
• Éviter de supprimer le style :focus en CSS (certains développeurs le font pour des raisons esthétiques, c’est une erreur)
• Ajouter un lien « Aller au contenu » en début de page pour permettre aux utilisateurs clavier de passer directement au contenu

Exemple de lien « Aller au contenu » :

<a href="#contenu-principal" class="skip-link">Aller au contenu principal</a>
<main id="contenu-principal">
  <!-- Votre contenu -->
</main>

Ce lien peut être visuellement masqué et n’apparaître qu’à la prise de focus. Il est simple à mettre en place et représente un gain de confort immédiat pour les utilisateurs navigant au clavier.

Navigation avec sous-menus : comment gérer les menus déroulants accessibles

Les menus déroulants sont souvent la partie la plus délicate à rendre accessible. Un sous-menu mal codé devient invisible aux lecteurs d’écran ou impossible à ouvrir au clavier.

La structure HTML recommandée

<nav aria-label="Menu principal">
  <ul>
    <li>
      <button aria-expanded="false" aria-controls="sous-menu-services">
        Services
      </button>
      <ul id="sous-menu-services" hidden>
        <li><a href="/services/web">Création web</a></li>
        <li><a href="/services/seo">Référencement SEO</a></li>
      </ul>
    </li>
  </ul>
</nav>

Les attributs ARIA indispensables pour les sous-menus

• aria-expanded="false" : indique que le sous-menu est fermé (passe à true quand il s’ouvre)
• aria-controls : lie le bouton au sous-menu correspondant
• hidden : masque le sous-menu par défaut, rendu visible via JavaScript
• aria-haspopup="true" : signale qu’un sous-menu existe

L’utilisation d’un <button> (et non d’un <a>) pour déclencher l’ouverture du sous-menu est la pratique recommandée : un bouton est nativement activable au clavier et à la voix.

Les attributs ARIA les plus utiles pour une navigation accessible

Les attributs ARIA (Accessible Rich Internet Applications) complètent le HTML sémantique pour les composants interactifs. Voici ceux à connaître absolument pour votre menu de navigation :

• aria-label : nomme un élément sans texte visible
• aria-labelledby : associe un élément à un titre existant dans la page
• aria-current="page" : indique la page active dans le menu
• aria-expanded : signale l’état ouvert ou fermé d’un sous-menu
• aria-hidden="true" : masque un élément décoratif des lecteurs d’écran

Exemple pour signaler la page en cours :

<li><a href="/blog" aria-current="page">Blog</a></li>

Ce simple attribut permet à l’utilisateur d’un lecteur d’écran de savoir immédiatement sur quelle page il se trouve, sans avoir à lire l’ensemble du menu.

Bonnes pratiques pour une navigation HTML accessible et efficace

Au-delà de la structure technique, voici les bonnes pratiques à appliquer systématiquement sur tous vos projets :

• Utilisez des intitulés de liens clairs et descriptifs : évitez « Cliquez ici » ou « En savoir plus » sans contexte
• Maintenez un ordre de tabulation logique (ne mélangez pas l’ordre visuel et l’ordre du DOM)
• Assurez un contraste suffisant entre le texte des liens et leur arrière-plan (ratio minimum 4,5:1 selon WCAG)
• Ne désactivez jamais le contour de focus (outline) en CSS sans proposer une alternative visible
• Testez votre navigation avec un lecteur d’écran (NVDA gratuit sur Windows, VoiceOver intégré sur Mac et iOS)
• Vérifiez la navigation au clavier uniquement, en branchant votre clavier et en n’utilisant que Tab, Entrée et Échap

Comment choisir la bonne approche selon votre projet

Il n’existe pas une solution unique. Le type de navigation à mettre en place dépend de votre contexte :

• Site simple (blog, vitrine) : une navigation plate avec <nav> et <ul> suffit. Solution rapide, facile à personnaliser, adaptée aux débutants.
• Site avec sous-menus : utilisez des boutons avec aria-expanded et un peu de JavaScript pour gérer l’ouverture. Prêt à l’emploi avec les exemples de ce guide.
• Application web ou interface complexe : adoptez le pattern de navigation ARIA recommandé par le W3C (Disclosure Navigation), conçu pour les interfaces riches.
• Framework CSS (Bootstrap, Tailwind) : ces outils proposent des composants de navigation, mais vérifiez toujours que les attributs ARIA sont bien présents. Ils ne le sont pas toujours par défaut.

FAQ : navigation accessible en HTML

Quelle balise HTML utiliser pour un menu de navigation ?

La balise <nav> est la référence pour tout menu de navigation principal ou secondaire. Elle est reconnue par les navigateurs, les lecteurs d’écran et les moteurs de recherche. Associez-la à une liste <ul> et des éléments <li> pour une structure sémantique complète.

Est-il obligatoire d’utiliser ARIA pour une navigation accessible ?

Non, pas systématiquement. Pour une navigation simple, le HTML sémantique suffit. ARIA devient indispensable dès que vous ajoutez des composants interactifs comme des sous-menus déroulants, des onglets ou des accordéons. La règle d’or : n’utilisez ARIA que si le HTML natif ne couvre pas le besoin.

Comment tester l’accessibilité de ma navigation ?

Plusieurs méthodes complémentaires : naviguer uniquement au clavier (Tab, Entrée, Échap), utiliser un lecteur d’écran comme NVDA (gratuit sur Windows), et passer par des outils automatisés comme WAVE, Axe ou Lighthouse (intégré dans Chrome DevTools). Ces tests combinés permettent de détecter la grande majorité des problèmes d’accessibilité.

Peut-on créer un menu accessible sans JavaScript ?

Oui, pour les navigations simples sans sous-menus. Un menu à un niveau, structuré avec <nav>, <ul> et des liens <a>, est totalement accessible sans JavaScript. Pour les sous-menus déroulants, JavaScript reste nécessaire pour gérer les états d’ouverture et les attributs ARIA dynamiques.

Qu’est-ce que le lien « Aller au contenu » et pourquoi est-il important ?

C’est un lien placé en toute première position dans le code HTML, avant la navigation, qui permet aux utilisateurs clavier et aux lecteurs d’écran de sauter directement au contenu principal. Sans lui, ces utilisateurs sont obligés de parcourir l’intégralité du menu à chaque chargement de page. Simple à implémenter, c’est l’une des améliorations d’accessibilité les plus efficaces.

Les menus en CSS pur (sans JavaScript) sont-ils accessibles ?

Un menu simple en CSS pur peut être accessible si la structure HTML est correcte. En revanche, les menus déroulants gérés uniquement par CSS (via :hover par exemple) posent problème : ils ne sont généralement pas activables au clavier et ne mettent pas à jour les attributs ARIA comme aria-expanded. Pour un sous-menu vraiment accessible, JavaScript reste la solution la plus fiable.

Conclusion : une navigation accessible, c’est un site meilleur pour tous

Créer une navigation accessible en HTML ne demande pas de compétences avancées. Une structure sémantique correcte, quelques attributs ARIA bien placés et une attention portée à la navigation clavier suffisent à couvrir l’essentiel.

Commencez par les bases : la balise <nav>, des liens clairs, un attribut aria-current="page" et un lien « Aller au contenu ». Ensuite, progressez vers les sous-menus accessibles si votre projet l’exige.

Testez votre navigation au clavier dès aujourd’hui : c’est le moyen le plus rapide de mesurer où vous en êtes. Et si vous voulez aller plus loin, les ressources du W3C et du projet WAI-ARIA vous fourniront tous les patterns prêts à l’emploi dont vous avez besoin.