Chapitre 3.2 — Structure & landmarks

⏱️ TL;DR — Une page accessible est découpée en régions — les landmarks : <header>, <nav>, <main>, <aside>, <footer>, plus <section> quand elle porte un nom. Ces balises créent une carte de la page que les utilisateurs de lecteur d’écran parcourent d’un raccourci, sans tout réécouter. Règle d’or : un seul <main> par page, et on préfère toujours les balises natives à leurs équivalents role="…". Bien posés, les landmarks rendent aussi possibles les liens d’évitement (détaillés en Partie 4).

🎯 Objectifs

• Nommer les landmarks natifs et le rôle de chacun.
• Comprendre comment un utilisateur de lecteur d’écran navigue par régions.
• Savoir quand utiliser <section> et pourquoi lui donner un nom accessible.
• Choisir la balise native plutôt que son équivalent ARIA de landmark.

Les régions d’une page

Un landmark (« point de repère ») est une grande zone fonctionnelle de la page. Le HTML moderne fournit un élément dédié pour chacune :

*Le <header> et le <footer> n’exposent banner/contentinfo que lorsqu’ils sont au niveau supérieur de la page (pas imbriqués dans un <article> ou une <section>).

Deux règles cadrent l’ensemble :

• Un seul <main> par page. C’est le contenu, la destination des liens d’évitement.
• Si tu as plusieurs <nav> (principale, fil d’Ariane, pied de page), donne à chacun un nom via aria-label ou aria-labelledby, sinon le lecteur d’écran annonce « navigation, navigation, navigation » sans les distinguer.

<!-- ❌ Aucune région : tout est du <div>, la page n'a pas de carte -->
<div class="top">…</div>
<div class="content">…</div>
<div class="foot">…</div>
 
<!-- ✅ Landmarks natifs : la page a une structure navigable -->
<header>
  <a href="/">A11yLearn</a>
  <nav aria-label="Principale">…</nav>
</header>
<main>
  <h1>Catalogue de cours</h1>
  …
</main>
<aside aria-label="Filtres">…</aside>
<footer>…</footer>

Comment on navigue par landmarks

Les lecteurs d’écran offrent un raccourci pour sauter de région en région (par exemple la touche D sur NVDA, ou le rotor sur VoiceOver qui liste toutes les régions). L’utilisateur n’écoute pas la page de haut en bas : il ouvre la liste des landmarks, choisit « contenu principal » et y saute directement — comme un voyant qui balaie la page des yeux pour repérer le menu, le contenu, le pied de page.

Sans landmarks, ce raccourci ne renvoie rien : l’utilisateur doit tout parcourir séquentiellement, du logo jusqu’au contenu, à chaque page. Avec eux, il s’oriente en deux touches. C’est l’un des gains d’accessibilité les plus rentables : quelques bonnes balises pour une navigation transformée.

♿ Côté utilisateur — Imagine devoir écouter, sur chaque page, l’intégralité de l’en-tête et du menu avant d’atteindre l’article. C’est l’expérience d’un utilisateur de lecteur d’écran sur une page sans landmarks. Avec un <main> bien placé, il appuie sur une touche et arrive directement au contenu. Les landmarks, ce sont les panneaux indicateurs de ta page.

<section> : seulement si elle a un nom

<section> est le landmark le plus mal utilisé. Une <section> n’expose le rôle region que si elle porte un nom accessible — généralement via aria-labelledby pointant vers son titre. Une <section> sans nom n’est, pour le lecteur d’écran, guère plus qu’une <div> : n’en abuse pas comme d’un simple conteneur de style.

<!-- ❌ <section> anonyme : pas de repère utile, autant utiliser <div> -->
<section>
  <h2>Cours populaires</h2>
  …
</section>
 
<!-- ✅ <section> nommée : elle devient une région navigable et annoncée -->
<section aria-labelledby="pop-titre">
  <h2 id="pop-titre">Cours populaires</h2>
  …
</section>

Schéma d’une page bien structurée

Landmarks natifs vs rôles ARIA

À chaque balise correspond un rôle ARIA de landmark que tu pourrais poser sur une <div> : role="banner", role="navigation", role="main", role="complementary", role="contentinfo", role="region". Ils existent surtout pour du code hérité qu’on ne peut pas encore rebâtir. Sur du neuf, préfère toujours la balise native :

<!-- ⚠️ Fonctionne, mais verbeux et fragile : à réserver au legacy -->
<div role="main">…</div>
 
<!-- ✅ Idiomatique : le rôle est implicite, rien à maintenir -->
<main>…</main>

Pourquoi ? La balise native est plus courte, ne peut pas se désynchroniser de son rôle, et bénéficie des comportements associés. C’est la première règle d’ARIA appliquée à la structure (voir Partie 6).

⚠️ Piège — Empiler les rôles redondants : écrire <nav role="navigation"> ou <main role="main">. C’est inutile (le rôle est déjà implicite) et signe souvent une mauvaise compréhension d’ARIA. Poser role="main" sur une <div> alors qu’un <main> existe, c’est se compliquer la vie pour un résultat moins bon. La bonne balise suffit.

Aperçu : les liens d’évitement

Une fois le <main> en place, tu peux offrir un lien d’évitement (skip link) : le tout premier lien focusable de la page, « Aller au contenu », qui saute par-dessus l’en-tête et le menu pour amener le focus directement dans <main>. C’est un standard d’accessibilité (lié au critère 2.4.1 Contourner des blocs), particulièrement précieux pour les utilisateurs de clavier. On le construit en détail en Partie 4 ; retiens ici qu’il repose sur une structure de landmarks correcte.

🧭 Sur A11yLearn — Le tableau de bord d’A11yLearn empilait quatre <div> : barre du haut, menu latéral, zone centrale, pied de page. On les convertit en <header>, <nav aria-label="Latérale">, <main> et <footer>, et on nomme le menu principal <nav aria-label="Principale"> pour le distinguer du menu latéral. Résultat immédiat : l’utilisateur de NVDA ouvre la liste des landmarks, voit « Principale », « Latérale », « contenu principal », « pied de page », et saute où il veut. On ajoutera le lien d’évitement en Partie 4 — mais il n’était possible que parce que le <main> existe maintenant.

✏️ Exercices

Exercice 1 — Pose les landmarks. On te donne cette structure en <div>. Réécris-la avec les bons landmarks natifs.

<div class="site-header">Logo + recherche</div>
<div class="menu">Liens principaux</div>
<div class="page">Contenu de l'article</div>
<div class="sidebar">Articles liés</div>
<div class="site-footer">Mentions légales</div>

<header>Logo + recherche</header>
<nav aria-label="Principale">Liens principaux</nav>
<main>Contenu de l'article</main>
<aside aria-label="Articles liés">Articles liés</aside>
<footer>Mentions légales</footer>

Exercice 2 — Deux menus, un problème. Une page a une navigation principale et un fil d’Ariane, tous deux en <nav> sans attribut. Qu’entend l’utilisateur de lecteur d’écran, et comment corriges-tu ?

<nav aria-label="Principale">…</nav>
<nav aria-label="Fil d'Ariane">…</nav>

🧠 Quiz de révision

Chapitre suivant : Titres & listes — la hiérarchie des titres, le raccourci le plus utilisé au lecteur d’écran, et la sémantique des listes.