Comment créer une navigation accessible sans casser le crawl de Google ?

Trop de développeurs tombent dans le piège du JavaScript sur-utilisé, des menus dynamiques illisibles, ou des structures HTML bancales. Résultat : Google se perd, les lecteurs d'écrans aussi.

Depuis peu, l'European Accessibility Act (EAA) impose à tous les services numériques (e-commerce, applications, services publics, etc.) d'être pleinement accessibles, sous peine de sanctions. Ce n'est plus seulement une bonne pratique : c'est une obligation légale pour de nombreux sites opérant dans l'Union Européenne. Autrement dit, une navigation inaccessible n'est plus seulement un frein pour vos utilisateurs, c'est aussi un risque juridique réel.

Voici comment créer une navigation claire, propre, SEO-friendly et accessible. Spoiler : ce n'est ni compliqué, ni ésotérique.

La balise <nav> : votre meilleure alliée

La balise <nav> en HTML5 n'est pas juste décorative. C'est un repère fort pour Google et les lecteurs d'écrans : elle leur dit "ici, c'est de la navigation importante".

Une bonne structure de navigation comprend:

• Une structure claire (<ul>, <li> et <a>), lisible et accessible
• L'attribut aria-label pour les lecteurs d'écran
• Aucun JS requis pour l'affichage de base : Google voit tout, tout de suite

Exemple :

<!-- ✅ Bon -->
<nav aria-label="Navigation principale">
  <ul>
    <li><a href="/recettes">Recettes</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Nous contacter</a></li>
  </ul>
</nav>

<!-- ❌ Mauvais -->
<div class="menu">
  <div onclick="location.href='/recettes'">Recettes</div>
  <div onclick="location.href='/blog'">Blog</div>
  <div onclick="location.href='/contact'">Nous contacter</div>
</div>

En clair : Google comprend instantanément la première structure. La seconde ? Il ne voit même pas que ce sont des liens.

Pas de liens = pas de crawl

Trop de menus modernes sont rendus uniquement via JavaScript. Par exemple :

<button id="burger-menu">☰</button>
<nav id="menu"></nav>

<script>
  document.getElementById('burger-menu').addEventListener('click', () => {
    document.getElementById('menu').innerHTML = `
      <ul>
        <li><a href="/recettes">Recettes</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/contact">Nous contacter</a></li>
      </ul>
    `;
  });
</script>

Problème n°1 : Google peut ne pas voir vos liens

Si Google ne peut pas exécuter votre JavaScript (ou s'il y a une erreur), votre navigation devient invisible. Résultat : vos pages importantes ne sont pas crawlées.

Problème n°2 : accessibilité cassée

Les lecteurs d'écran lisent le DOM tel qu'il existe au moment où l'utilisateur commence à naviguer. Si votre navigation est injectée uniquement via JavaScript, avec un délai ou après une interaction, il y a un risque qu'elle ne soit jamais perçue par les utilisateurs malvoyants. Certains lecteurs d'écran peuvent détecter les modifications dynamiques du DOM, mais ce n'est pas garanti, surtout si le JS est lent ou désactivé.

La règle d'or : le HTML doit toujours contenir les liens. Le JavaScript peut améliorer, mais jamais remplacer.

Exemple complet : burger menu, accessible et SEO-friendly

Dans beaucoup de cas, on veut un burger menu sur mobile. Mais au lieu de tout générer en JavaScript, il existe une meilleure solution.

Voici une implémentation propre d'un burger menu pour un site web :

<nav aria-label="Navigation principale">
  <button 
    id="burger-menu" 
    aria-expanded="false" 
    aria-controls="menu"
    aria-label="Ouvrir le menu"
  >
    ☰
  </button>
  <ul id="menu" hidden>
    <li><a href="/recettes">Recettes</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Nous contacter</a></li>
  </ul>
</nav>

<script>
  const burger = document.getElementById('burger-menu');
  const menu = document.getElementById('menu');

  function toggleMenu() {
    const isExpanded = burger.getAttribute('aria-expanded') === 'true';
    burger.setAttribute('aria-expanded', String(!isExpanded));
    menu.hidden = isExpanded;
  }

  // Gestion du click
  burger.addEventListener('click', toggleMenu);

  // Gestion du clavier
  burger.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      toggleMenu();
    } else if (e.key === 'Escape' && !menu.hidden) {
      e.preventDefault();
      toggleMenu();
      burger.focus(); // Remettre le focus sur le bouton
    }
  });  
</script>

Et voila ! Notre menu fonctionne correctement, tout en gardant un HTML propre pour Google et les lecteurs d'écrans :

• Les liens sont dans l'HTML : Google les lit sans problème
• Le bouton a des attributs ARIA : les lecteurs d'écrans comprennent l'interaction
• Le menu est masqué visuellement, mais toujours présent dans le DOM
• Bonus : le clavier est correctement géré

TLDR : les règles d'or pour une navigation SEO-friendly

• Utilisez <nav> avec des attributs ARIA : Google et les lecteurs d'écrans vous remercieront
• Liens toujours en HTML : jamais générés uniquement en JavaScript
• Structure sémantique : <ul>, <li>, <a> dans cet ordre
• Attributs ARIA : pour une accessibilité parfaite sur les menus complexes