RGAA Lab

Composants accessibles

L'en-tête et le pied de page

L'en-tête et le pied de page sont les deux régions dont la conformité ne se juge pas dans une page, mais entre plusieurs : le RGAA y exige la constance autant que le balisage. Démo comparative, code, critères RGAA.

5 critères RGAA en jeu

Essayez-le

Page « Les critères »

Titre de la page

Le contenu propre du gabarit.

Page « Les composants »

Titre de la page

Le contenu propre du gabarit.

Les vignettes sont des schémas de page : leurs liens mènent aux pages réelles du site, leur champ de recherche n’interroge rien.

Le bouton relève, dans le code source de chaque vignette, l’ordre des zones et le nom accessible du lien du logo.

Les deux vignettes sont deux gabarits du même site, et elles se ressemblent assez pour qu’on les croie identiques. Le bouton les relève et les compare : l’ordre des zones dans le code source, et le nom accessible du lien du logo. Les deux intitulés du logo se défendent pris isolément — c’est d’en porter deux d’une page à l’autre qui est la faute. Tabulez ensuite dans chacune : l’ordre des arrêts suit le code, pas la mise en page, et c’est là que l’écart se sent.

Ces vignettes sont des schémas de page : leurs zones sont des div étiquetés et non de vrais <header> et <footer>. La raison est celle que la fiche enseigne au point 1 — deux bannières dans une même page seraient la faute qu’on décrit ici.

Cette démo existe aussi en page autonome.

L’erreur courante

Le logo de l’en-tête, dont l’alternative décrit le fichier plutôt que la destination.

<!-- À ne pas faire -->
<header>
	<a href="/"><img src="/logo.svg" alt="logo" /></a>
	…
</header>

Ce que cela coûte se mesure dans la liste des liens, que les lecteurs d’écran proposent et qui énumère les intitulés hors de leur contexte. On y lit « logo » : ni le nom du site, ni l’endroit où l’on arriverait. Or c’est le lien qu’on cherche en premier quand on s’est perdu — celui qui ramène au point de départ — et il est le seul de la page à ne rien dire de lui-même.

Le test 6.1.2 demande que l’intitulé d’un lien image, seul ou additionné au contexte du lien, permette d’en comprendre la fonction et la destination. « Logo » ne renseigne ni l’une ni l’autre.

Trois variantes, aussi répandues :

  • alt="" sur le logo d’un lien. L’image est déclarée décorative, le lien se retrouve sans intitulé, et il est annoncé « lien » — parfois suivi de l’URL lue caractère par caractère. Un alt vide convient à une image de décoration, jamais à la seule chose que contient un lien.
  • alt="Logo RGAA Lab". Le mot « logo » nomme le type d’image, pas la destination : il ajoute une syllabe à chaque annonce et ne répond toujours pas à la question.
  • Le pied de page en <div class="footer">. Le rendu est le bon, et la liste des repères perd son dernier point d’ancrage : plus rien ne permet de sauter aux mentions légales sans traverser la page entière.

Le code, pas à pas

1. Les deux balises, au premier niveau du document

<header>…</header>
<main id="contenu">…</main>
<footer>…</footer>

Aucun role n’est écrit, et les deux régions existent : banner pour <header>, contentinfo pour <footer>. C’est ce que le test 9.2.1 attend, et ces deux rôles sont uniques dans la page.

L’unicité est ce qui rend la position importante. Sous un <article>, un <aside>, un <main>, un <nav> ou une <section>, <header> et <footer> perdent leur rôle de région : ils redeviennent l’en-tête et le pied d’un article. C’est heureux — sans cette règle, une page de vingt articles déclarerait vingt bannières — mais c’est aussi le piège : un composant de carte qui pose un <footer> ne casse rien, un gabarit qui enferme le pied de page du site dans une <section> le fait disparaître de la liste des repères.

Le glossaire du référentiel prévient du même piège, pour les deux zones. De la zone d’en-tête : « Attention à ne pas confondre cette zone d’en-tête, unique dans le site, avec tout contenu pouvant être balisé en HTML5 avec l’élément <header>. » Et de la zone de pied de page, mot pour mot la même mise en garde.

2. Le logo : un lien qui nomme sa destination

<a href="/">
	<img src="/logo.svg" alt="Accueil — RGAA Lab" />
</a>

L’alternative de l’image devient le nom du lien, puisque le lien ne contient rien d’autre. Le référentiel n’impose aucune formule : il demande que l’intitulé permette de comprendre la fonction et la destination. Nommer le site seul — alt="RGAA Lab" — se défend dans un en-tête, où la convention est connue ; nommer aussi la destination lève le doute pour ceux qui ne la connaissent pas, et c’est la forme la plus sûre.

Si le logo comporte un mot-marque visible en HTML, le nom accessible doit le contenir en entier :

<a href="/" class="logo">
	<svg viewBox="0 0 24 24" aria-hidden="true">…</svg>
	<span>RGAA Lab</span>
	<span class="sr-only">, accueil</span>
</a>

C’est le test 6.1.5 : le nom accessible d’un lien contient au moins son intitulé visible. « RGAA Lab, accueil » le contient, et en tête ; aria-label="Accueil" posé sur le même lien l’écraserait, et la commande vocale ne pourrait plus désigner ce qu’elle lit à l’écran.

Le dessin est alors aria-hidden="true" : le mot porte déjà le nom, et une alternative sur l’image le ferait annoncer deux fois.

3. Ce que l’en-tête contient, et comment chaque zone se nomme

<header>
	<a href="/"><img src="/logo.svg" alt="Accueil — RGAA Lab" /></a>

	<nav aria-label="Principale">
		<ul>…</ul>
	</nav>

	<search>
		<form action="/recherche">
			<label for="q">Rechercher sur le site</label>
			<input id="q" type="search" name="q" />
			<button type="submit">Rechercher</button>
		</form>
	</search>
</header>

Trois zones, trois repères : banner, navigation, search. L’élément <search> porte le rôle search sans qu’on l’écrive ; là où il n’est pas disponible, role="search" sur le <form> donne le même résultat. Le glossaire des landmarks énumère ce rôle au même titre que les quatre autres.

Le <nav> se nomme dès qu’il y en a plusieurs dans la page, et le nom ne répète pas le rôle : aria-label="Principale", pas « Navigation principale ». Le détail est traité dans la fiche « menu de navigation », et l’étiquette du champ dans celle du champ de recherche.

4. Le pied de page : ce qu’on y met, et ce qui n’y est pas un menu

Le glossaire décrit la zone de pied de page comme « les informations concernant le fonctionnement du site ou les informations légales » — mentions légales, crédits, conditions d’utilisation, plan du site, page accessibilité.

<footer>
	<ul>
		<li><a href="/mentions-legales">Mentions légales</a></li>
		<li><a href="/plan-du-site">Plan du site</a></li>
		<li><a href="/accessibilite">Accessibilité : partiellement conforme</a></li>
	</ul>
</footer>

Faut-il un <nav> autour ? Le glossaire « menu et barre de navigation » tranche à moitié : « Les liens de pied de page renvoyant vers les mentions légales, plan du site et autres informations concernant le site ne sont pas considérés comme un menu de navigation principal. » Ce n’est donc pas une zone de navigation principale, et le test 9.2.1 réserve <nav> aux navigations principales et secondaires. Un pied de page qui ne contient que des liens légaux se passe très bien de <nav> ; un pied de page qui reprend l’arborescence du site en colonnes est, lui, une navigation secondaire, et le <nav> nommé y a sa place.

5. La constance : ce qui ne se vérifie qu’à deux pages

C’est le point qui distingue ces deux zones de tous les autres composants. Le critère 12.2 demande deux choses à la fois :

  • le menu et les barres de navigation sont toujours à la même place dans la présentation ;
  • ils se présentent toujours dans le même ordre relatif dans le code source.

Les deux conditions comptent, et la seconde est celle qu’on casse sans le voir. Un menu visuellement immobile, mais injecté après le contenu sur un gabarit et avant sur un autre, change l’ordre de tabulation d’une page à l’autre. Une grille CSS qui replace les blocs à l’écran produit exactement ce décalage.

Le critère 12.5 pose la même exigence sur l’accès au moteur de recherche, et le 12.4 sur l’accès au plan du site : même fonctionnalité, même place, même ordre relatif. « Même fonctionnalité » est plus strict qu’il n’y paraît — un champ visible ici et une loupe qui déplie un panneau là sont deux fonctionnalités différentes, même si elles mènent au même formulaire.

Trois cas particuliers, que le référentiel énonce et qu’on oublie : la page d’accueil est exclue du critère 12.2, comme les pages d’un site d’une seule page, ou un changement que l’utilisateur a lui-même déclenché. Comparer un gabarit intérieur à la page d’accueil ne prouve donc rien ; c’est entre les pages intérieures que le constat se fait.

6. Deux systèmes de navigation, et où ils logent

Le critère 12.1 ne demande pas un bon menu : il demande deux dispositifs différents parmi trois, sur chaque ensemble de pages — un menu de navigation, un plan du site, un moteur de recherche. N’importe quelle paire convient.

En pratique, ces dispositifs habitent les deux zones de cette fiche : le menu et la recherche dans l’en-tête, le lien vers le plan du site dans le pied de page. Un site qui soigne son menu et n’a ni plan ni recherche échoue au critère, et aucune qualité du menu ne le rattrape.

Le glossaire « système de navigation » est limitatif : « les systèmes de navigation retenus sont : Menu de navigation principal ; Table des matières ; Plan du site ; Moteur de recherche. » Un fil d’Ariane, une pagination ou un nuage de mots-clés n’y figurent pas. La table des matières y figure, elle, mais le test 12.1.1 ne compte que les trois dispositifs énumérés plus haut : c’est parmi eux que la paire se forme.

Au clavier

Ces deux zones ne sont pas des composants interactifs : elles ne prennent pas le focus et n’ont aucun comportement propre. Ce qui se joue au clavier, c’est leur traversée — l’en-tête est ce qu’on parcourt avant d’atteindre le contenu, à chaque page.

ToucheEffet
TabTraverse l’en-tête lien par lien, avant le contenu. C’est ce coût, payé à chaque page, que le lien d’évitement supprime.
EntréeSur le logo : va à l’accueil — encore faut-il que son intitulé l’ait annoncé.
D / Maj + D (NVDA)Va au repère suivant ou précédent. La bannière ouvre la liste, les informations de contenu la ferment.
R / Maj + R (JAWS)Le même déplacement d’un repère à l’autre.
VO + U (VoiceOver)Ouvre le rotor, où les points de repère forment une liste.

Ce que le lecteur d’écran restitue

En entrant dans l’en-tête : sa nature, de l’ordre de « bannière ». Sur le logo : « Accueil — RGAA Lab, lien ». En entrant dans le pied de page : « informations de contenu », que certains lecteurs annoncent « pied de page ». La formulation varie d’un lecteur à l’autre ; les informations, non.

Le diagnostic se fait mieux par la liste des repères que par la lecture continue. Si vous entendez « logo, lien », l’alternative décrit le dessin. Si vous n’entendez « lien » suivi que d’une URL, l’image du logo porte un alt vide. S’il n’y a pas d’entrée « informations de contenu » dans la liste, le pied de page est en div — ou il est enfermé sous un <article> ou une <section>, ce qui revient au même. Et si vous entendez deux bannières, un role="banner" a été posé à la main quelque part, en plus de celui du <header>.

Checklist

  • <header> et <footer> au premier niveau du document, jamais sous un <article> ou une <section>.
  • Une seule bannière et un seul pied de page par page, sans role redondant.
  • Le lien du logo nomme sa destination, et contient son mot-marque visible s’il en a un.
  • Le <nav> et la zone de recherche nommés, sans répéter leur rôle dans le nom.
  • Le menu à la même place à l’écran et au même rang dans le code source, d’un gabarit à l’autre.
  • Le plan du site et le moteur de recherche atteints par la même fonctionnalité partout.
  • Deux systèmes de navigation au moins sur l’ensemble de pages, pas un seul.

Les critères RGAA en jeu

  • Critère 9.2 — Cohérence de la structure du document

    Deux des six conditions du test 9.2.1 portent sur ces zones — l'en-tête en balise header, le pied de page en balise footer — et une balise posée sous un article ou une section a perdu son rôle sans que rien ne change à l'écran.

  • Critère 6.1 — Liens explicites

    Le logo est un lien image, et son intitulé est le premier que tout le monde rencontre : une alternative qui dit « logo » décrit le fichier au lieu de nommer la destination, et c'est l'échec le plus répandu de l'en-tête.

  • Critère 12.2 — Place constante du menu

    Le menu et les barres de navigation doivent garder la même place à l'écran et le même ordre relatif dans le code source : un gabarit qui déplace la navigation change l'ordre de tabulation sans que rien ne se voie.

  • Critère 12.5 — Accès au moteur de recherche

    Le moteur de recherche vit presque toujours dans l'en-tête, et le critère exige qu'on l'y atteigne par la même fonctionnalité partout : un champ ici et une loupe qui déplie un panneau là sont deux fonctionnalités différentes.

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

    Ces deux zones portent les dispositifs que le critère compte — menu, moteur de recherche, plan du site — et il en faut deux différents : un site qui n'offre qu'un menu échoue quelle que soit la qualité de ce menu.

Vérifiez votre composant avec l'extension

Pour aller plus loin

Sources