Rolle Landmarke

`banner`

Das seitenweite Header-Landmark — enthält üblicherweise Logo, primäre Navigation und Suche. Das übergeordnete <header>-Element übernimmt diese Rolle automatisch. Pro Seite ist nur ein banner zulässig.

Verwendung

<header> sollte als direktes Kindelement von <body> (oder <html> in einem Top-Level-Fragment) verwendet werden. Befindet sich <header> auf der obersten Ebene, macht der Browser das Element automatisch als banner-Landmark verfügbar. Ist <header> hingegen innerhalb von <article>, <section>, <main> oder <aside> verschachtelt, handelt es sich lediglich um eine generische Gruppe, nicht um ein Landmark.

role="banner" auf einem <div> ist nur dann angebracht, wenn <header> nicht verwendet werden kann — etwa in einem CMS, das Landmark-Tags entfernt.

Pro Seite darf es nur ein Banner geben. Existiert ein zweiter Header, der nicht das seitenweite Banner ist (z. B. ein Abschnitts-Header oder ein Kommentar-Thread-Header), sollte ein einfaches <header> innerhalb des jeweiligen Abschnitts verwendet werden — nicht auf der obersten Ebene.

Beschriftung

Enthält eine Seite mehrere Landmarks desselben Typs (bei banner selten, bei Navigation häufig), sollte aria-label hinzugefügt werden, um sie zu unterscheiden. Ein einzelnes Banner benötigt keine Beschriftung — Screenreader kündigen es als „Banner“ an.

Häufige Fehler

Mehrere <header>-Elemente auf der obersten Seitenebene, die jeweils zu einem Banner-Landmark werden. Screenreader-Nutzende sehen zwei „Banner“-Einträge im Landmark-Menü und können nicht erkennen, welcher der eigentliche Header ist.
role="banner" auf einem <header>, das innerhalb von <main> oder <article> verschachtelt ist. Die Rolle überschreibt das standardmäßige Nicht-Landmark-Verhalten und belastet die Landmark-Navigation.
Das Site-Logo befindet sich außerhalb von <header> und liegt damit außerhalb des Banner-Landmarks.
Eine Sticky-Navigation wird als separates <div role="banner"> neben dem ursprünglichen <header> gerendert — das ergibt zwei Banner.
Ein Banner mit leerem Inhalt (nur dekorative Rahmen) — das Landmark erscheint weiterhin in der Screenreader-Navigation, enthält aber nichts.

Beispiel

<body>
  <header>
    <a href="/" aria-label="Disability World home">
      <img src="/logo.svg" alt="">
    </a>
    <nav aria-label="Primary">
      <a href="/toolkit/">Toolkit</a>
      <a href="/library/">Library</a>
    </nav>
  </header>
  <main>…</main>
</body>