Rôle Point de repère

`contentinfo`

Le landmark pied de page du site — droits d'auteur, contact, liens légaux. L'élément <footer> de niveau supérieur porte ce rôle automatiquement. Un seul contentinfo par page.

Quand l’utiliser

Utilisez <footer> comme enfant direct de <body>. Quand <footer> est au niveau supérieur, le navigateur l’expose automatiquement comme landmark contentinfo. Quand il est imbriqué dans un <article>, une <section>, un <main> ou un <aside>, c’est simplement un groupe générique, pas un landmark.

role="contentinfo" sur un <div> n’est approprié que si vous ne pouvez pas utiliser <footer> (CMS ancien).

Il ne doit pas y avoir plus d’un contentinfo par page. Si des articles individuels ont leurs propres pieds de page (signature, boutons de partage), utilisez un <footer> ordinaire imbriqué dans <article> — ils ne sont pas des landmarks, ce qui est le résultat correct.

Quand labelliser

Un seul contentinfo n’a pas besoin de libellé — les lecteurs d’écran l’annoncent comme « informations sur le contenu ». Si un libellé semble nécessaire, c’est généralement le signe que vous avez deux contentinfos et que l’un d’eux ne devrait pas être un pied de page de niveau supérieur.

Erreurs fréquentes

Deux éléments <footer> au niveau supérieur. Deux landmarks contentinfo ; les utilisateurs de lecteurs d’écran ne peuvent pas déterminer lequel est le vrai.
role="contentinfo" sur un <footer> imbriqué dans <article> ou <main>. Le rôle remplace le comportement non-landmark par défaut et ajoute du bruit.
Placer des liens de « navigation secondaire » dans <footer> comme liste plate. Enveloppez-les dans <nav aria-label="Footer"> pour qu’ils apparaissent comme landmark de navigation.
Bannière de cookies du site placée dans <footer> — c’est un dialogue ou une région, pas une partie du contentinfo.
<footer> vide laissé dans le DOM comme espace réservé de mise en page — le landmark contentinfo existe sans contenu.

Exemple

<body>
  <header>…</header>
  <main>…</main>
  <footer>
    <nav aria-label="Footer">
      <a href="/about">About</a>
      <a href="/privacy">Privacy</a>
      <a href="/contact">Contact</a>
    </nav>
    <p>&copy; 2026 Disability World</p>
  </footer>
</body>