Comment utiliser les landmarks pour structurer votre page ?

Imaginez devoir réécouter le menu, le logo et la barre de recherche à chaque page que vous visitez, sans pouvoir les sauter. C’est le quotidien d’un utilisateur de lecteur d’écran sur un site sans repères. Les « landmarks » — des marqueurs de structure — lui permettent d’aller droit au contenu, en contournant ce qui se répète.

Le problème : les blocs répétitifs

Sur chaque page, des éléments reviennent à l’identique : l’en-tête, le menu de navigation, le pied de page. Pour un visiteur voyant, l’œil les survole en une fraction de seconde. Pour quelqu’un qui « écoute » la page, les réentendre intégralement à chaque visite est épuisant. La règle WCAG 2.4.1 (« contourner des blocs ») demande justement de pouvoir les ignorer et accéder directement au contenu principal.

C’est quoi un landmark ?

Un landmark (ou « repère ») est un marquage qui identifie le rôle d’une zone de la page : « ici, c’est la navigation », « là, le contenu principal », « ici, le pied de page ». Les technologies d’assistance s’en servent comme d’une table des matières : l’utilisateur saute de repère en repère, et atteint le contenu en un geste.

Comment on les pose

Deux façons, souvent combinées. La plus moderne : utiliser les balises HTML structurantes — <header>, <nav>, <main>, <footer> — qui créent des repères automatiquement. L’autre : les rôles ARIA (role="navigation", role="main"…) pour les cas où les balises ne suffisent pas. Une balise <main> bien placée fait déjà l’essentiel.

Le complément : le lien d’évitement

Une bonne pratique très utile : le « lien d’évitement » (skip link), un lien souvent invisible jusqu’à ce qu’on tabule, placé tout en haut de la page : « Aller au contenu principal ». Il permet, dès la première touche, de sauter le menu. Simple et redoutablement efficace pour l’accessibilité au clavier.

Pourquoi « côté développeur »

Poser correctement les landmarks et le lien d’évitement touche à la structure HTML du thème : c’est typiquement un travail de développeur. Les thèmes modernes utilisent généralement déjà les bonnes balises structurantes ; le sujet se pose surtout sur des thèmes anciens ou des sites construits « à la main ». Votre rôle : repérer le manque et le faire corriger.

Un bénéfice qui dépasse l’accessibilité

Une structure HTML claire (header, nav, main, footer) ne sert pas qu’aux lecteurs d’écran : elle aide aussi les moteurs et les IA à comprendre l’organisation de la page — où est le menu, où est le vrai contenu. Une bonne structure d’accessibilité est, là encore, une bonne structure tout court.

Comment vérifier et corriger

1. Limpi et des outils comme l’extension WAVE signalent l’absence de repères structurants.
2. Vérifiez que votre page utilise bien <header>, <nav>, <main> et <footer>, et qu’un lien « aller au contenu » existe.
3. Confiez la correction à un développeur si la structure repose sur de simples <div> sans rôle.

Sans repères, écouter une page, c’est lire un livre sans sommaire : il faut tout parcourir pour trouver le chapitre. Les landmarks sont ce sommaire — invisible, mais salvateur.

En résumé

Les landmarks (repères de structure) permettent aux utilisateurs de lecteurs d’écran d’ignorer les blocs répétitifs (menu, en-tête) et d’aller droit au contenu — c’est la règle WCAG 2.4.1. On les pose surtout via les balises structurantes (<header>, <nav>, <main>, <footer>), complétées d’un lien « aller au contenu ». La correction est technique, mais les thèmes modernes le gèrent souvent déjà. Bonus : une structure claire aide aussi moteurs et IA.

Questions fréquentes

C&rsquo;est quoi un landmark ?

Un repère qui identifie le rôle d’une zone (navigation, contenu principal, pied de page), utilisé par les lecteurs d’écran comme une table des matières.

Que demande la règle WCAG 2.4.1 ?

De permettre aux utilisateurs d’ignorer les blocs de contenu répétitifs (menu, en-tête) pour accéder directement au contenu principal.

Comment pose-t-on des landmarks ?

Surtout via les balises structurantes <header>, <nav>, <main>, <footer>, complétées au besoin par des rôles ARIA.

C&rsquo;est quoi un lien d&rsquo;évitement ?

Un lien en haut de page (« Aller au contenu principal ») qui permet, dès la première touche du clavier, de sauter le menu.

Est-ce à ma portée ?

C’est technique : cela touche la structure HTML du thème. Les thèmes modernes le gèrent souvent ; sinon, confiez la correction à un développeur.

Sources et références

1. W3C — Web Accessibility Initiative (WAI) — Comprendre le critère 2.4.1 : contourner des blocs
2. MDN Web Docs (Mozilla) — Rôles de repère ARIA (landmark roles)