Rôle Point de repère

`main`

Le point de repère du contenu principal — le contenu primaire de la page, à l'exclusion des en-têtes, navigations et pieds de page répétés. L'élément <main> porte ce rôle automatiquement. Exactement un main par page.

Quand l’utiliser

Utilisez l’élément <main>. C’est le point de repère le plus important de la page — les utilisateurs de lecteurs d’écran sautent généralement directement vers main pour passer les navigations et les en-têtes.

role="main" sur un <div> est approprié uniquement lorsque vous ne pouvez pas utiliser <main> (principalement une contrainte de CMS). Les deux formes doivent respecter la même règle : exactement un main par page. Plusieurs mains brisent l’affordance « Aller au contenu principal », et beaucoup de lecteurs d’écran n’exposent que le premier.

Le point de repère main doit contenir tout ce qui est unique à la page en cours, et ne doit pas contenir l’en-tête du site, la navigation principale ou le pied de page. Placez ceux-ci dans des éléments frères <header>, <nav> et <footer>, pas à l’intérieur de <main>.

Quand ajouter un label

Un seul main n’a pas besoin de label — les lecteurs d’écran l’annoncent comme « main ». Ajoutez aria-label uniquement si la page a plusieurs mains (ce qu’elle ne devrait pas avoir) ou si vous souhaitez distinguer la zone de contenu principal d’une SPA d’une précédente pour une raison quelconque.

Le lien « Aller au contenu principal » doit pointer vers <main id="main"> (ou l’id que vous lui donnez) avec <a href="#main"> en haut de la page — il s’agit de la technique de contournement des blocs du critère de succès WCAG 2.4.1.

Erreurs courantes

Deux éléments <main> sur la même page. La cause la plus fréquente : une SPA qui intègre le <main> d’une nouvelle vue sans supprimer le précédent.
Page sans <main> du tout. Les utilisateurs de lecteurs d’écran ne peuvent pas passer l’en-tête.
<main> placé à l’intérieur d’un <header> ou d’un <footer>. La hiérarchie des points de repère est incorrecte.
Placer la navigation de l’ensemble du site dans <main>. Elle se répète sur toutes les pages, elle appartient donc à <header>/<nav>, pas dans le contenu unique de la page.
Le lien « Aller au contenu principal » pointe vers un id qui n’existe pas.

Exemple

<body>
  <a href="#main" class="visually-hidden focus-visible">Skip to main content</a>
  <header>…</header>
  <main id="main">
    <h1>Why one main landmark per page</h1>
    <p>…</p>
  </main>
  <footer>…</footer>
</body>