Aller au contenu

Composants accessibles

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

Deux régions uniques, un lien d'évitement devant, un logo qui dit où il mène, un menu et une recherche nommés — et la même place sur chaque page. Démo, code, critères RGAA.

6 critères RGAA en jeu

Essayez-le

Tabulez dans la page : le premier arrêt est le lien d’évitement, invisible jusque-là.

Les repères, tels qu’un lecteur d’écran les liste

Lus dans le document de l’exemple une fois chargé.

Une page entière, telle qu’elle doit être : un lien d’évitement, un en-tête avec son logo, son menu et sa recherche, le contenu, un pied de page. Cliquez « Afficher les repères » : chaque région se dessine avec le nom qu’un lecteur d’écran lui donne, et la liste en dessous est lue dans le code de la page — pas écrite d’avance. Puis tabulez dans la page : le premier arrêt est le lien d’évitement, et l’en-tête se traverse lien par lien avant d’arriver au contenu.

La page vit dans un cadre à part parce qu’une bannière et un pied de page sont uniques dans un document — et celui-ci a déjà les siens.

Cette démo existe aussi en page autonome.

L’erreur courante

L’en-tête du site enfermé dans un bloc d’habillage qui lui retire son rôle.

<!-- À ne pas faire : rien ne change à l'écran, la bannière a disparu -->
<section class="page">
	<header>
		<a href="/"><img src="/logo.svg" alt="logo" /></a>
		<nav>…</nav>
	</header>
	<main>…</main>
	<footer>…</footer>
</section>

Ce que cela coûte ne se voit pas : le rendu est identique. Il s’entend. Un <header> ou un <footer> placé sous un <article>, un <aside>, un <main>, un <nav> ou une <section> n’est plus la bannière ni le pied de page du site — il redevient l’en-tête et le pied d’un morceau de contenu, et la liste des repères du lecteur d’écran ne le mentionne plus. Plus rien ne permet de sauter au menu, ni de sauter aux mentions légales sans traverser la page.

Et le logo de cet exemple cumule la seconde faute la plus répandue de la zone : alt="logo" décrit le fichier, pas la destination. Dans la liste des liens, on lit « logo » — ni le nom du site, ni l’endroit où l’on arriverait. Le point 2 y revient.

Deux variantes, aussi fréquentes :

  • 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.
  • Un role="banner" posé à la main, en plus de celui que <header> porte déjà, ou sur un second bandeau : deux bannières annoncées, et aucune qui soit la bonne.

Comment le coder

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 lien d’évitement, en premier

<body>
	<a class="evitement" href="#contenu">Aller au contenu</a>
	<header>…</header>
	<main id="contenu">…</main>

L’en-tête se traverse au clavier lien par lien, à chaque page. Le lien d’évitement est ce qui épargne ce coût : premier élément du document, il mène au <main>, et il peut rester invisible jusqu’à ce qu’il reçoive le focus. Ce n’est pas un composant de l’en-tête, mais il n’a de sens que par lui — et l’en-tête qui n’en a pas oblige à le payer entier. Le critère 12.7 le demande ; la fiche liens d’évitement le traite en entier, cible, visibilité et focus compris.

3. 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.

4. 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.

5. 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.

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.

7. 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.

Le geste de l’audit tient en un tableau. Deux pages intérieures du même site, et deux lignes lues dans leur code.

Ce qui est lu dans le code de deux pages du même site, et si c’est constant
Page APage BConstant ?
Ordre des zones du bandeaulogo · menu · recherchelogo · recherche · menuNon — c’est la faute (12.2)
Nom du lien du logo« Accueil — RGAA Lab »« RGAA Lab »Non — c’est la faute (6.1, 12.2)

Chaque page prise seule est correcte. C’est l’écart qui est la faute, et il n’apparaît sur aucune des deux.

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.

Touches du clavier et leur effet sur l’en-tête et le pied de 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>.
  • Un lien d’évitement avant l’en-tête, qui mène au <main>.
  • 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.7 — Lien d’évitement vers le contenu

    L'en-tête se traverse lien par lien à chaque page : le lien d'évitement placé devant lui est ce qui épargne ce coût, et un en-tête sans lui l'impose entier.

  • 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