Plan du site

Le plan du site est une page HTML qui liste tous les liens d'un site web, organisés par sections. Il offre une vue d'ensemble de l'arborescence et constitue un moyen alternatif de navigation. Les utilisateurs qui peinent à s'orienter dans les menus classiques y trouvent un accès direct à chaque page.

Votre site compte 200 pages, un méga-menu déroulant et un moteur de recherche. Un utilisateur avec des troubles cognitifs cherche une page dont il ne connaît pas le nom exact. Le moteur de recherche ne l'aide pas. Le méga-menu le perd. Le plan du site, lui, affiche toute l'arborescence sur une seule page.

#Ce que les WCAG attendent

Le critère 2.4.5 des WCAG (niveau AA) exige au moins deux moyens de localiser une page au sein d'un site. Les options : menu de navigation, moteur de recherche, plan du site, table des matières, fil d'Ariane. Le plan du site n'est pas obligatoire en soi, mais c'est l'une des techniques recommandées par le W3C (technique G63) pour satisfaire ce critère.

Le RGAA reprend cette exigence dans sa thématique 12 (Navigation). Un site conforme propose au moins deux systèmes parmi les trois : menu de navigation, plan du site, moteur de recherche.

Un point que beaucoup ignorent : le plan du site satisfait aussi le critère 2.4.8 (niveau AAA, localisation). Il permet à l'utilisateur de situer une page dans l'architecture globale.

#HTML ou XML : la confusion classique

Le plan du site et le sitemap XML sont deux choses distinctes. Le plan du site est une page HTML, visible, destinée aux humains. Le sitemap XML est un fichier technique que les robots des moteurs de recherche lisent pour indexer vos pages. Avoir un sitemap.xml ne remplace pas un plan du site HTML : Google le lira, vos utilisateurs non.

Un plan du site HTML bien construit utilise des listes imbriquées (<ul> et <li>) qui reflètent la hiérarchie réelle du site :

<nav aria-label="Plan du site">
  <h1>Plan du site</h1>
  <ul>
    <li><a href="/services">Services</a>
      <ul>
        <li><a href="/services/audit">Audit</a></li>
        <li><a href="/services/formation">Formation</a></li>
      </ul>
    </li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

La balise <nav> avec un aria-label permet aux lecteurs d'écran d'identifier cette zone comme une navigation dédiée.

#Le piège du plan du site fantôme

Le W3C le précise dans la technique G63 : un plan du site n'est valide que s'il est complet et à jour. Une page ajoutée au site mais absente du plan rend ce dernier inutile. Même constat pour les liens cassés vers des pages supprimées.

L'erreur la plus courante : générer le plan du site une fois à la mise en ligne, puis ne jamais le mettre à jour. Six mois plus tard, la moitié des liens ne mènent nulle part.

#En résumé

Le plan du site est une page de navigation qui liste tous les liens de votre site de façon structurée. Construisez-le avec des listes HTML imbriquées dans une balise <nav>. Automatisez sa mise à jour pour qu'il reflète toujours l'état réel du site.