RGAA Lab

Composants accessibles

Le plan du site

Des trois systèmes de navigation que le RGAA reconnaît, le plan est celui qui donne une vue d'ensemble — et son défaut ne se lit jamais dans son balisage, seulement en comparant le plan au site. Deux exigences : refléter l'architecture réelle, et s'atteindre depuis toutes les pages.

5 critères RGAA en jeu

Essayez-le

Quelle version du plan inspecter ?

Lancez la comparaison sur le plan vieilli, puis sur le plan remis à jour : le balisage est le même des deux côtés — mêmes listes, mêmes liens, même repère nommé. Seul le contenu diffère, et c’est lui qui décide du critère. Parcourez ensuite les deux versions à la tabulation : rien ne distingue la bonne de la mauvaise, ce qui explique pourquoi aucun outil ne tranche ici.

Cette démo existe aussi en page autonome.

L’erreur courante

Le plan du site écrit une fois, à la livraison, et jamais rouvert.

<!-- Le plan du site, écrit à la main en 2021. Depuis, une rubrique a été
     ouverte, et une page a été détachée d'une autre. -->
<ul>
	<li><a href="/criteres">Les critères du RGAA</a></li>
	<li><a href="/composants">Les composants accessibles</a></li>
	<li><a href="/services/audit">Le conseil</a></li>
</ul>

Cherchez le défaut : il n’y en a aucun. Le HTML est valide, les listes sont de vraies listes, les intitulés sont explicites, les liens répondent. Un validateur passe, notre moteur de détection ne relève rien, aucun outil automatique n’a quoi que ce soit à en dire.

Et pourtant le critère 12.3 échoue sur deux de ses trois tests. La rubrique « glossaire », ouverte l’an dernier, ne figure nulle part : qui se fie au plan ne saura pas qu’elle existe. Et le troisième lien annonce « Le conseil » en menant à la page d’audit, dont il a gardé l’adresse — le test 12.3.3 demande précisément que les liens renvoient « bien vers les pages indiquées par l’intitulé ».

C’est ce qui rend ce composant à part : son défaut est éditorial, pas technique. Il ne se voit qu’en comparant la page au site, ce que seul un humain fait.

Trois variantes, plus courantes encore :

  • Le plan à plat, une seule liste de quarante liens sans niveaux. Il reste une table des matières ; il a cessé d’être une vue d’ensemble, et rien n’y dit quelle page dépend de quelle rubrique.
  • La hiérarchie dessinée en CSS, par un décalage ou un tiret en début de ligne. À l’œil elle se lit ; à l’oreille elle n’existe pas, et le plan redevient plat.
  • Le lien « Plan du site » réservé à la page d’accueil. Celui qui arrive par un moteur de recherche sur une page profonde — le cas le plus fréquent — n’a aucun moyen de retrouver où il se trouve. C’est le critère 12.4 qui tombe, pas le 12.3.

Le code, pas à pas

1. Une page pour les humains, pas un fichier pour les robots

Le sitemap.xml et le plan du site portent presque le même nom et n’ont rien à voir. Le premier est un format destiné aux moteurs de recherche ; le second est une page consultable. Le glossaire du référentiel le définit comme une « page dédiée présentant l’arborescence d’un site web », et c’est cette page-là que le critère 12.3 évalue.

Un sitemap.xml livré à la place ne satisfait donc rien du tout — et il ne satisfait pas davantage le critère 12.1, qui compte les systèmes de navigation offerts à l’utilisateur.

2. Des listes imbriquées, et la sous-liste dans son li

<nav aria-labelledby="titre-du-plan">
	<h1 id="titre-du-plan">Plan du site</h1>

	<ul>
		<li>
			<a href="/criteres">Les critères du RGAA</a>
			<!-- La sous-liste est DANS le li de sa rubrique -->
			<ul>
				<li><a href="/criteres/couverture-rgaa">La couverture du référentiel</a></li>
			</ul>
		</li>
		<li><a href="/glossaire">Le glossaire du référentiel</a></li>
	</ul>
</nav>

L’imbrication est l’arborescence : c’est elle, et rien d’autre, qui dit « ces pages dépendent de celle-là ». Un lecteur d’écran l’annonce en entrant dans la sous-liste, avec son niveau et son nombre d’éléments.

La faute classique est de poser la sous-liste entre deux li, enfant direct du ul parent :

<!-- À ne pas faire : le ul n'est enfant d'aucun li -->
<ul>
	<li><a href="/criteres">Les critères du RGAA</a></li>
	<ul>
		<li><a href="/criteres/couverture-rgaa">La couverture</a></li>
	</ul>
</ul>

Le DOM garde le ul là où il est écrit : l’analyseur ferme le li sur le </li>, puis insère la liste dans le ul parent — rien n’est déplacé. Ce qui disparaît, c’est le rattachement : cette sous-liste n’est plus l’enfant d’aucun li, la relation « ces pages dépendent de celle-là » n’est plus exprimée, et sa restitution ne dépend plus que de l’implémentation du lecteur d’écran. Le code est de surcroît invalide, ce que relève le critère 8.2.

3. Des intitulés qui tiennent leur promesse

Le test 12.3.3 ne demande pas que l’intitulé recopie le titre de la page ; il demande que le lien mène à la page annoncée.

Le critère 6.1, lui, accepte l’intitulé « additionné au contexte », et le contexte du lien est une liste limitative, dont un item vise exactement cette structure :

Le contenu de l’item de liste (balise <li>) ou le contenu d’un item de liste parent (balise <li>) dans lequel le lien texte est présent

Un plan correctement imbriqué fournit donc ce contexte lui-même : un « Voir tout » placé dans la sous-liste d’un li « Les critères du RGAA » a un item de liste parent qui le complète, et satisfait la seconde condition du test 6.1.1.

L’intitulé générique n’est fautif que là où aucun li parent ne le rattrape : au premier niveau du plan, où le li du lien ne contient que lui-même, et partout où deux « Voir tout » partagent le même li parent — le contexte existe alors, mais il est le même pour les deux et ne distingue plus rien.

Une adresse qui change sans que l’intitulé bouge est l’autre moitié du problème, et c’est celle que la démo relève : elle survit à toutes les relectures, parce que le lien continue de fonctionner.

4. Ce que le plan n’est pas obligé de contenir

Le glossaire est explicite :

il n’est pas nécessaire que le plan du site contienne les liens vers toutes les pages du site, en revanche il est nécessaire qu’à partir du plan du site, l’utilisateur puisse atteindre l’ensemble des pages du site.

Un plan qui s’arrête aux rubriques et aux sous-rubriques est donc conforme, tant que chacune de ces pages conduit au reste. Un plan qui omet une rubrique entière ne l’est pas : ce qu’elle contient devient inatteignable par ce chemin.

5. Le lien vers le plan, au même endroit partout

C’est le critère 12.4, et il porte sur un ensemble de pages, pas sur une page. Trois conditions, et les trois se vérifient en comparant les pages entre elles : la même fonctionnalité, à la même place à l’écran, au même rang dans le code source.

En pratique, le lien vit dans le pied de page, et les deux fautes sont toujours les mêmes : il disparaît sur la page d’accueil, dont la maquette est différente ; ou il change d’intitulé en route — « Plan » ici, « Plan du site » là, « Arborescence » ailleurs. Le pied de page inclus partout par le même gabarit règle les deux d’un coup.

Notez que le lien du pied de page vers le plan n’est pas un menu de navigation principal au sens du référentiel : c’est le plan lui-même qui est le système de navigation, pas le lien qui y mène.

6. Avez-vous besoin de ce composant ?

Le critère 12.1 demande deux systèmes de navigation parmi trois — menu, plan du site, moteur de recherche — et n’importe quelle paire convient. Un site doté d’un menu et d’un moteur de recherche interne est donc conforme sans plan du site.

Restent deux raisons de l’écrire quand même, et ce sont des préférences, pas des obligations : c’est le seul des trois qui donne une vue d’ensemble sans qu’on ait à savoir quoi chercher, et il se maintient à peu de frais quand il est généré depuis la source qui décrit l’arborescence — le plan de classement, l’arbre des rubriques du CMS.

Cette source-là n’est pas le menu, et la distinction n’est pas un détail : la couverture d’un menu est volontairement partielle, il montre les chemins qu’on a choisi de mettre en avant. Un plan généré depuis le menu recopie donc ce choix au lieu de décrire le site, et ne prouve rien au test 12.3.1.

Si vous le publiez, il entre dans le périmètre du 12.3 : un plan absent ne coûte rien, un plan faux coûte une non-conformité.

Au clavier

Le plan n’a aucun comportement propre : ce sont des liens dans des listes, et c’est exactement ce qu’on veut. Ce qui suit relève de la navigation ordinaire, et de ce que les listes rendent possible.

ToucheEffet
TabPasse au lien suivant, dans l’ordre de l’arborescence. Le focus suit la lecture, y compris en entrant dans une sous-rubrique.
Maj + TabRevient au lien précédent.
l (NVDA, JAWS)Saute à la liste suivante — donc d’une rubrique à la suivante, sans parcourir ses pages.
i (NVDA, JAWS)Passe à l’élément de liste suivant.
Rotor (VoiceOver)Ouvre la liste des liens ou des repères de la page, et y amène le focus directement.

Ce que le lecteur d’écran restitue

En entrant dans le plan : le repère et son nom, puis la liste et son compte — de l’ordre de « Plan du site, navigation. Liste de 4 éléments. Les critères du RGAA, lien. ». En descendant dans une rubrique : « Liste de 2 éléments, niveau 2. La couverture du référentiel, lien. » La formulation varie d’un lecteur à l’autre, mais les informations sont les mêmes : le nom du repère, le compte, le niveau.

Si vous n’entendez jamais de niveau, l’imbrication n’est pas dans le balisage — la hiérarchie est dessinée en CSS, ou les sous-listes sont posées à côté des li au lieu d’être dedans. Si vous entendez une seule liste de quarante éléments, le plan est à plat. Si vous n’entendez aucun nom en entrant, le nav n’est pas nommé, et le plan se confond avec les autres repères de navigation de la page.

Checklist

  • Une page consultable, distincte du sitemap.xml.
  • Des listes imbriquées, chaque sous-liste dans le li de sa rubrique.
  • Toutes les rubriques du site présentes ; toutes les pages atteignables depuis le plan.
  • Chaque intitulé annonce la page qu’il ouvre — et y mène vraiment.
  • Un nav nommé, ou un titre de page qui dit « plan du site ».
  • Le lien vers le plan sur toutes les pages : même intitulé, même place, même rang dans le code.
  • Une relecture du plan à chaque rubrique ouverte, renommée ou fermée.

Les critères RGAA en jeu

  • Critère 12.3 — Pertinence du plan du site

    Un plan qui a cessé de représenter l'architecture du site, ou dont un lien mène ailleurs que là où son intitulé le promet, échoue au critère — même parfaitement balisé.

  • Critère 12.4 — Accès au plan du site

    Le lien vers le plan doit être la même fonctionnalité, à la même place, sur toutes les pages de l'ensemble : celui qui n'existe que sur l'accueil ne sert plus de repère.

  • Critère 12.1 — Deux systèmes de navigation

    Le test 12.1.1 compte des dispositifs présents : servir un sitemap.xml en guise de plan laisse le site sans plan consultable, donc sans la paire exigée si le menu était son seul autre système.

  • Critère 9.3 — Structure des listes

    L'arborescence n'existe que par l'imbrication des listes : une sous-liste posée entre deux li, ou des liens séparés par des retours à la ligne, effacent la hiérarchie pour qui écoute.

  • Critère 6.1 — Liens explicites

    Le li parent d'une rubrique est l'un des contextes que le test 6.1.1 accepte : dans un plan imbriqué, un « Voir tout » n'est fautif qu'au premier niveau, ou répété sous un même li parent qui ne le distingue plus.

Vérifiez votre composant avec l'extension

Pour aller plus loin

Sources