Et ` ` — compte-t-il comme un repère ?

Uniquement lorsqu'il possède un nom accessible (aria-label ou aria-labelledby). Un nu n'est qu'une région générique. Si la section n'a pas besoin de figurer dans le menu des repères, utilisez plutôt .

Repères ARIA - Docs MetricSpot

Q: Ai-je besoin de `role="banner"` et `role="contentinfo"` sur ` ` et ` ` ?

Non. Lorsque et sont enfants directs de , les navigateurs les exposent automatiquement comme banner et contentinfo. Ajouter le rôle est redondant et peut désorienter certains lecteurs d'écran plus anciens.

Ce que vérifie ce contrôle

Analyse le HTML rendu à la recherche de régions de repère : les éléments de sectionnement <main>, <nav>, <header>, <footer>, <aside>, <form>, <section> (avec un nom accessible), ainsi que leurs équivalents ARIA (role="main", role="navigation", etc.). Le contrôle échoue si la page ne comporte aucun <main> (ou role="main").

Pourquoi c’est important

Les lecteurs d’écran exposent un menu de repères — JAWS utilise R, NVDA utilise D, VoiceOver utilise le rotor. L’utilisateur arrive sur votre page et appuie sur une seule touche pour sauter au contenu principal, en passant outre l’en-tête et la navigation globale.

Sans repères, ce raccourci n’existe pas. L’utilisateur doit parcourir au clavier chaque lien de votre en-tête, chaque bannière promotionnelle, chaque menu déroulant de connexion, chaque sélecteur de langue avant d’atteindre l’article qu’il était venu lire. Sur un site marketing typique, cela représente 30 à 60 éléments lus à voix haute avant la première phrase utile.

Les repères sont également la manière dont le critère de réussite WCAG 2.1 1.3.1 (Information et relations) est satisfait pour la structure de page, et la manière dont les audits liés à l’Acte européen sur l’accessibilité s’attendent à ce que les régions navigables soient exposées par programmation.

Comment corriger

Le minimum : encapsulez votre contenu principal dans <main>. Ajoutez <nav> autour de la navigation principale, <header> pour l’en-tête du site, <footer> pour le pied de page.

HTML :

<body>
  <header>
    <nav aria-label="Principale">...</nav>
  </header>
  <main>
    <h1>Titre de la page</h1>
    <article>...</article>
    <aside aria-label="Articles connexes">...</aside>
  </main>
  <footer>...</footer>
</body>

Pièges courants :

Un seul <main> par page. Plusieurs <main> cassent la carte des repères.
Plusieurs régions <nav> ont besoin de noms accessibles pour qu’un lecteur d’écran puisse les distinguer. Utilisez aria-label="Principale", aria-label="Fil d'Ariane", aria-label="Pied de page" — ne les laissez pas sans nom.
<header> et <footer> ne comptent comme repères banner/contentinfo que lorsqu’ils sont enfants directs de <body>. À l’intérieur d’un <article>, ce ne sont que des contenus de sectionnement, pas des repères.
N’ajoutez pas role="main" à <main> de manière redondante. L’élément natif expose déjà le rôle.

Next.js (App Router) :

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <body>
        <header><SiteNav /></header>
        <main>{children}</main>
        <footer><SiteFooter /></footer>
      </body>
    </html>
  );
}

Astro :

---
// src/layouts/Base.astro
---
<html lang="fr">
  <body>
    <header><Nav /></header>
    <main><slot /></main>
    <footer><Footer /></footer>
  </body>
</html>

WordPress : les thèmes blocs modernes encapsulent automatiquement le contenu de l’article dans <main> ; les thèmes classiques ont besoin de <?php wp_body_open(); ?> suivi de votre conteneur <main> dans header.php et de </main> avant get_footer().

Si vous ne pouvez pas modifier le balisage (verrouillage du CMS, widget intégré), ajoutez role="main" au div conteneur existant — même effet pour les technologies d’assistance, moins idéal pour les analyseurs.

Associez ce contrôle à Déclarer la langue de la page et Étiquettes de champs de formulaire — les trois ensemble couvrent la majorité des gains rapides en accessibilité.

Questions fréquentes

Ai-je besoin de `role="banner"` et `role="contentinfo"` sur `<header>` et `<footer>` ?

Non. Lorsque <header> et <footer> sont enfants directs de <body>, les navigateurs les exposent automatiquement comme banner et contentinfo. Ajouter le rôle est redondant et peut désorienter certains lecteurs d’écran plus anciens.

Et `<section>` — compte-t-il comme un repère ?

Uniquement lorsqu’il possède un nom accessible (aria-label ou aria-labelledby). Un <section> nu n’est qu’une région générique. Si la section n’a pas besoin de figurer dans le menu des repères, utilisez plutôt <div>.

Ajouter des repères affecte-t-il le SEO ?

Indirectement. Google ne classe pas sur la base des repères, mais il utilise le plan HTML5 (en particulier <main> et <article>) pour identifier le contenu principal par rapport au chrome. Une structure de repères plus propre se corrèle à une extraction plus propre dans les AI Overviews et les featured snippets.