Rolle Landmarke

`main`

Das Landmark für den Hauptinhalt — der primäre Seiteninhalt, ausgenommen wiederkehrende Header, Navigation und Footer. Das Element <main> trägt diese Rolle automatisch. Genau ein main pro Seite.

Wann verwenden

Das Element <main> sollte verwendet werden. Es ist das wichtigste Landmark auf der Seite — Screenreader-Nutzerinnen und -Nutzer springen typischerweise zuerst zu main, um Navigation und Header zu überspringen.

role="main" auf einem <div> ist nur dann angemessen, wenn <main> nicht verwendet werden kann (meist eine CMS-Einschränkung). Für beide Formen gilt dieselbe Regel: genau ein main pro Seite. Mehrere mains zerstören die „Zum Hauptinhalt springen“-Funktion, und viele Screenreader zeigen nur das erste an.

Das main-Landmark sollte alles enthalten, was auf der aktuellen Seite einzigartig ist, und darf weder den Seitenheader, die primäre Navigation noch den Footer enthalten. Diese gehören als Geschwisterelemente in <header>, <nav> und <footer>, nicht in <main>.

Wann beschriften

Ein einzelnes main benötigt keine Beschriftung — Screenreader kündigen es als „main“ an. aria-label sollte nur hinzugefügt werden, wenn die Seite mehrere mains enthält (was vermieden werden sollte) oder wenn der Hauptinhaltsbereich einer Single-Page-Anwendung aus einem bestimmten Grund vom vorherigen unterschieden werden soll.

Der Link „Zum Hauptinhalt springen“ sollte auf <main id="main"> (oder die gewählte id) verweisen, mit <a href="#main"> am Seitenanfang — dies ist die Bypass-Blocks-Technik gemäß WCAG 2.4.1.

Häufige Fehler

Zwei <main>-Elemente auf derselben Seite. Häufigste Ursache: Eine Single-Page-Anwendung bindet das <main> einer neuen Ansicht ein, ohne das vorherige zu entfernen.
Seite ohne <main> überhaupt. Screenreader-Nutzerinnen und -Nutzer können den Header nicht überspringen.
<main> innerhalb von <header> oder <footer>. Die Landmark-Hierarchie ist falsch.
Seitenweite Navigation innerhalb von <main>. Da sie sich über alle Seiten wiederholt, gehört sie in <header>/<nav>, nicht in den einzigartigen Seiteninhalt.
Der Link „Zum Hauptinhalt springen“ verweist auf eine id, die nicht existiert.

Beispiel

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