Zum Inhalt springen
checkfrei
Menü

Landmarks: Seitenbereiche mit main, nav, header und footer

Stand: 3. Oktober 2026 · CAZ Labs

Kurz gesagt

Landmarks sind die groben Bereiche einer Seite: Kopf, Navigation, Hauptinhalt und Fußbereich. Du legst sie mit den HTML-Elementen `<header>`, `<nav>`, `<main>` und `<footer>` fest, und Screenreader-Nutzer springen damit per Tastendruck direkt in den Bereich, den sie suchen. Das Wichtigste ist ein einziges `<main>` um den eigentlichen Inhalt.

Warum das wichtig ist

Sehende Besucher erfassen den Aufbau einer Seite in einer Sekunde: oben Logo und Menü, in der Mitte der Inhalt, unten Impressum und Kontakt. Ein Screenreader liest dagegen alles der Reihe nach vor. Ohne Landmarks hört sich ein blinder Besucher auf jeder Unterseite erst durch Logo, Menü und Suchfeld, bis endlich der Text beginnt.

Mit Landmarks geht das schneller. In NVDA springt die Taste D zum nächsten Bereich, VoiceOver listet alle Bereiche im Rotor auf. Der Screenreader nennt beim Betreten die Art des Bereichs, und der Nutzer weiß sofort, wo er gerade ist. Die Rollen ergeben sich direkt aus dem HTML: <main> wird zum Hauptbereich, <nav> zur Navigation. <header> und <footer> bekommen die Rollen banner und contentinfo, solange sie nicht in einem <article> oder einer <section> stecken.

In den WCAG fällt das unter 1.3.1 Info und Beziehungen und 2.4.1 Blöcke umgehen. Für 2.4.1 gibt es mit dem Sprunglink noch einen zweiten bekannten Weg, Landmarks sind aber der mit dem geringsten Aufwand. Nebenbei verstehen auch Suchmaschinen und KI-Crawler besser, wo dein Inhalt steht und was nur Rahmen ist. Mehr dazu steht unter semantisches HTML.

So prüfst du es selbst

Am schnellsten geht es mit dem kostenlosen Check von checkfrei. Er sucht main, nav, header und footer sowie die passenden ARIA-Rollen wie role="main". Fehlt main, ist das ein Fehler. Fehlt einer der anderen Bereiche, gibt es eine Warnung. Ob die Bereiche an der richtigen Stelle sitzen, kann nur ein Mensch beurteilen. Von Hand dauert das zwei Minuten:

  1. Öffne deine Seite und lass dir mit Strg+U (am Mac Cmd+Option+U) den Quelltext anzeigen.
  2. Such mit Strg+F nach <main. Findest du nichts, such nach role="main". Eins von beiden muss da sein, und zwar genau einmal.
  3. Prüf auf die gleiche Weise <nav, <header und <footer.
  4. Bequemer geht es mit der Browser-Erweiterung "Landmarks" für Firefox und Chrome. Sie zeigt alle Bereiche einer Seite als Liste und hebt sie beim Anklicken hervor.

So behebst du es

Die Grundregel: ein <main> pro Seite, das den eigentlichen Inhalt umschließt. Kopfbereich, Menü und Footer stehen außerhalb davon.

WordPress

Block-Themes wie Twenty Twenty-Four bringen die Bereiche in der Regel schon mit. Fehlt <main>, öffne im Website-Editor die betroffene Vorlage, markier die Gruppe um den Inhalt und stell in der Seitenleiste unter "Erweitert" das HTML-Element auf <main>.

Bei klassischen Themes steckt das Gerüst in header.php, footer.php und den Seitenvorlagen. Änderungen dort gehören in ein Child-Theme, sonst sind sie beim nächsten Update weg. Page-Builder wie Elementor lassen dich an Containern ebenfalls das HTML-Tag einstellen.

Shopify

Aktuelle Themes wie Dawn setzen <main> bereits in der Datei layout/theme.liquid. Bei älteren oder stark angepassten Themes lohnt ein Blick in genau diese Datei: Die Ausgabe von {{ content_for_layout }} ist der Hauptinhalt und gehört in ein <main>.

HTML

So sieht ein sauberes Grundgerüst aus. Gibt es mehrere Menüs, unterscheidest du sie mit aria-label.

html
<body>
  <header>
    <a href="/">Logo</a>
    <nav aria-label="Hauptmenü">
      <ul>...</ul>
    </nav>
  </header>

  <main id="inhalt">
    <h1>Seitentitel</h1>
    ...
  </main>

  <footer>
    <nav aria-label="Rechtliches">
      <a href="/impressum">Impressum</a>
      <a href="/datenschutz">Datenschutz</a>
    </nav>
  </footer>
</body>

Next.js

Im App Router gehört das Gerüst in app/layout.tsx: <header> und <footer> einmal dort, <main> um {children}. Setz dann in den einzelnen Seiten kein weiteres <main>, sonst hast du zwei.

Typische Fehler

  • Zwei <main> auf einer Seite, oft weil Theme und Page-Builder jeweils eins setzen. Erlaubt ist nur ein sichtbares.
  • Ein <div role="main"> innerhalb von <main>. Doppelt hält hier nicht besser, der Screenreader meldet dann zwei Hauptbereiche.
  • Mehrere <nav> ohne Namen. Dann hört der Nutzer dreimal "Navigation" und weiß nicht, welche welche ist. Ein aria-label="Hauptmenü" löst das. Das Wort "Navigation" gehört nicht ins Label, das sagt der Screenreader ohnehin dazu.
  • Alles in <nav> packen, auch Teaser und Kontaktdaten. Navigation sind die Menüs, mehr nicht.

So prüft checkfrei

Wir suchen main, nav, header und footer (oder die passenden ARIA-Rollen). Fehlt main, ist es ein Fehler, fehlen andere, eine Warnung.

Gewicht 1 von 3 im Bereich Barrierefreiheit.

Häufige Fragen

Brauche ich role="main", wenn ich schon das main-Element nutze?

Nein. Aktuelle Browser geben <main> die Rolle automatisch. Das zusätzliche role="main" stammt aus der Zeit, als ältere Browser das Element noch nicht kannten. Es schadet nicht, bringt heute aber nichts mehr.

Darf eine Seite mehrere header- und footer-Elemente haben?

Ja. Ein <header> innerhalb eines <article> oder einer <section> ist erlaubt und wird nicht zur Landmark. Nur Kopf- und Fußbereich auf Seitenebene zählen als banner und contentinfo, und davon sollte es je einen geben.

Sind Landmarks Pflicht?

Die WCAG schreiben keine bestimmte Technik vor. Landmarks sind aber der einfachste anerkannte Weg, 1.3.1 und 2.4.1 zu erfüllen. Ein <main> kostet dich eine Zeile Code.

Jetzt deine Seite prüfen

checkfrei prüft Seitenbereiche (Landmarks) und 68 weitere Punkte in einem Durchgang. Kostenlos und ohne Anmeldung.