Landmarks
Les landmarks sont des repères structurels qui découpent une page web en grandes régions : en-tête, navigation, contenu principal, pied de page. Les lecteurs d'écran s'en servent pour proposer une navigation directe vers chaque section, sans parcourir tout le HTML séquentiellement.
Un utilisateur de lecteur d'écran ouvre votre site. Au lieu de parcourir chaque ligne de HTML, il affiche la liste des régions de la page et saute directement au contenu principal. JAWS, NVDA, VoiceOver\u00a0: tous les lecteurs d'écran modernes exploitent les landmarks pour offrir ce raccourci. Encore faut-il que votre code les fournisse.
#Huit rôles, huit régions
La spécification WAI-ARIA définit huit rôles landmark\u00a0: banner, navigation, main, complementary, contentinfo, search, form et region. Chacun identifie une section structurelle de la page.
En HTML5, plusieurs balises sémantiques créent ces landmarks automatiquement\u00a0:
| Balise HTML | Rôle landmark |
|---|---|
<header> (enfant de <body>) | banner |
<nav> | navigation |
<main> | main |
<aside> | complementary |
<footer> (enfant de <body>) | contentinfo |
Utilisez ces balises. Pas besoin d'ajouter role="navigation" sur un <nav>\u00a0: c'est redondant.
Un <header> imbriqué dans un <article> ou un <section> ne crée pas de landmark banner. Même règle pour <footer>. Seuls ceux directement enfants de <body> comptent.
#Le piège des landmarks multiples
Deux <nav> sur une même page\u00a0? Le lecteur d'écran annonce deux régions «\u00a0navigation\u00a0» sans distinction. Impossible de savoir laquelle mène au menu principal et laquelle au fil d'Ariane.
La solution\u00a0: aria-label.
<nav aria-label="Menu principal">...</nav>
<nav aria-label="Fil d'Ariane">...</nav>Chaque navigation porte un nom distinct.
Autre erreur courante\u00a0: multiplier les landmarks. Le W3C recommande sept régions maximum par page. Au-delà, la liste dans le lecteur d'écran ressemble à un menu de restaurant de 40 plats. On ne choisit plus.
#Une structure minimale qui fonctionne
<body>
<header>
<nav aria-label="Menu principal">...</nav>
</header>
<main>
<!-- contenu principal -->
</main>
<footer>...</footer>
</body>Trois landmarks suffisent pour une page simple. Le W3C recommande que tout le contenu perceptible réside dans un landmark. Du texte qui flotte entre </header> et <main> devient invisible dans la navigation par régions.
Côté normes, la technique ARIA11 des WCAG relie les landmarks aux critères 1.3.1 et 2.4.1. Le critère 9.2 du RGAA exige que chaque grande zone soit structurée avec sa balise HTML5.
#En résumé
Utilisez les balises HTML5 sémantiques\u00a0: elles créent les landmarks sans attribut supplémentaire. Étiquetez avec aria-label quand un même type de landmark apparaît plusieurs fois. Testez\u00a0: activez le rotor VoiceOver ou la liste de régions de NVDA et vérifiez que chaque section porte un nom clair.