Rolle Landmarke

`contentinfo`

Das seitenweite Footer-Landmark – Urheberrecht, Kontakt, rechtliche Links. Das oberste <footer>-Element trägt diese Rolle automatisch. Pro Seite ist nur ein contentinfo zulässig.

Wann zu verwenden

<footer> wird als direktes Kind von <body> verwendet. Steht <footer> auf oberster Ebene, macht der Browser es automatisch als contentinfo-Landmark verfügbar. Bei Verschachtelung innerhalb von <article>, <section>, <main> oder <aside> handelt es sich lediglich um eine generische Gruppe, nicht um ein Landmark.

role="contentinfo" auf einem <div> ist nur dann angemessen, wenn <footer> nicht verwendet werden kann (veraltetes CMS).

Pro Seite darf es nicht mehr als ein contentinfo geben. Haben einzelne Artikel eigene Footer (Verfasserangabe, Teilen-Schaltflächen), wird ein einfaches <footer> innerhalb von <article> verwendet – diese sind keine Landmarks, was das korrekte Ergebnis ist.

Wann zu beschriften

Ein einzelnes contentinfo benötigt keine Beschriftung – Screenreader kündigen es als „content information“ an. Erscheint eine Beschriftung notwendig, ist dies meist ein Zeichen dafür, dass zwei contentinfos vorhanden sind und eines davon kein Top-Level-Footer sein sollte.

Häufige Fehler

Zwei <footer>-Elemente auf oberster Ebene. Daraus entstehen zwei contentinfo-Landmarks; Screenreader-Nutzende können nicht erkennen, welches das eigentliche ist.
role="contentinfo" auf einem <footer>, das innerhalb von <article> oder <main> verschachtelt ist. Die Rolle überschreibt das standardmäßig nicht als Landmark ausgezeichnete Verhalten und erzeugt unnötigen Ballast.
Sekundäre Navigationslinks im <footer> als flache Liste. Diese sind in <nav aria-label="Footer"> einzuwickeln, damit sie als Navigations-Landmark erscheinen.
Seitenweites Cookie-Banner innerhalb von <footer> – es handelt sich um einen Dialog oder eine Region, nicht um Teil von contentinfo.
Leeres <footer>, das als Layout-Platzhalter im DOM verbleibt – das contentinfo-Landmark existiert ohne Inhalt.

Beispiel

<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>