Un lecteur d'écran moderne (NVDA, JAWS, VoiceOver) ne lit pas votre page de haut en bas : il affiche la liste des "landmarks" — les grandes régions de la page — et permet de sauter directement à celle qu'on veut. Sans landmarks, l'utilisateur est condamné à parcourir la page linéairement, élément par élément. Avec eux, il navigue comme avec un sommaire.

Le squelette recommandé

<body>
  <a class="skip-link" href="#main">Aller au contenu</a>
  <header role="banner">...</header>
  <nav role="navigation" aria-label="Principal">...</nav>
  <main id="main" role="main">
    <!-- contenu de la page -->
  </main>
  <aside role="complementary" aria-label="Filtres produit">...</aside>
  <footer role="contentinfo">...</footer>
</body>

Les balises HTML5 (`<header>`, `<nav>`, `<main>`, `<aside>`, `<footer>`) portent déjà un rôle implicite : le `role` explicite sert surtout la compatibilité et la clarté. La règle d'or : un seul `<main>`, un seul `<header role="banner">` et un seul `<footer role="contentinfo">` au niveau du document.

Nommer les régions qui se répètent

Si vous avez plusieurs `<nav>` (principale, fil d'Ariane, pagination), donnez à chacune un `aria-label` distinct : "Principal", "Fil d'Ariane", "Pagination". Sans cela, le lecteur d'écran annonce "navigation" trois fois sans distinction, et la cartographie perd tout son intérêt.

Spécifique e-commerce

  • →Page catégorie : les filtres dans un `<aside aria-label="Filtres">` à côté du `<main>`
  • →Fiche produit : un seul `<main>` ; le bloc "produits similaires" en `<aside>`
  • →Checkout : un `<form>` dans le `<main>`, sans nav secondaire qui distrait
  • →Footer : un seul `<footer role="contentinfo">` au niveau du body, jamais imbriqué dans le `<main>`

⚠ Les deux erreurs qui cassent tout

Premièrement, plusieurs `<main>` sur une même page : le lecteur d'écran ne sait plus où est le contenu principal. Deuxièmement, tout enfermer dans des `<div>` : sans balises sémantiques, il n'y a aucun landmark, et la liste des régions reste vide.

Vérifier sa cartographie

Sous NVDA, la touche Insertion+F7 ouvre la liste des landmarks, titres et liens. Si votre page n'affiche pas clairement header / navigation / main / footer, c'est que la structure sémantique est à revoir. C'est un test de 30 secondes qui révèle immédiatement la qualité du squelette.

Questions fréquentes

Faut-il les role= si j’utilise déjà <header>, <main>, etc. ?

Les rôles sont implicites avec les balises HTML5, donc redondants dans la plupart des cas. Les expliciter ne nuit pas et améliore la robustesse sur de vieux lecteurs d'écran. L'essentiel est d'utiliser les bonnes balises sémantiques plutôt que des `<div>`.

Combien de landmarks par page, idéalement ?

Pas de chiffre magique, mais restez lisible : banner, navigation, main, complementary, contentinfo couvrent l'essentiel. Trop de régions noie l'information autant que pas assez.

Le <main> doit-il être unique sur toute l’app SPA ?

Unique par vue affichée. Dans une SPA, à chaque changement de route, il ne doit y avoir qu'un seul `<main>` visible à la fois ; déplacer le focus vers lui après navigation est une bonne pratique complémentaire.

Contrôler la structure de landmarks de vos pages clés :

→ Lancer un audit