Seitenbereiche (Landmarks)

Was geprüft

Gezählt werden die Seitenbereiche (Landmarks) im HTML: <main> bzw. role="main" sowie <nav>, <header> und <footer> oder die entsprechenden Rollen. Unauffällig ist der Punkt, wenn der Hauptbereich genau einmal vorkommt und Navigation, Kopf- und Fußbereich vorhanden sind. Der Check liest nur das ausgelieferte HTML, nicht die gerenderte Seite, und deckt damit nur einen automatisch messbaren Teil ab.

Wie relevant

Niedrig, weil die Inhalte auch ohne Landmarks erreichbar sind. Sie erleichtern aber das schnelle Springen zwischen den Bereichen einer Seite.

Warum

Screenreader bieten eine Liste der Seitenbereiche an, über die Nutzer direkt zu Navigation, Inhalt oder Fußbereich springen. Fehlt <main> oder kommt es mehrfach vor, ist unklar, wo der eigentliche Inhalt beginnt. Ob daraus eine rechtliche Pflicht folgt, klären Sie mit Ihrer Rechtsberatung; öffentliche Leitfäden bietet die Bundesfachstelle Barrierefreiheit (Deutschland).

Wie beheben

Ersetzen Sie allgemeine <div>-Container für die Hauptbereiche durch <header>, <nav>, <main> und <footer>. Verwenden Sie <main> genau einmal pro Seite.

Nebenwirkung: Neue Elemente können CSS-Selektoren brechen, die auf div-Strukturen bauen; prüfen Sie das Layout. Mehrere <nav>-Bereiche sollten per aria-label unterscheidbar sein (z. B. „Hauptmenü“, „Fußzeile“).

WordPress: Block-Themes erzeugen header, main und footer über die Template-Teile. Bei klassischen Themes und Seitenbaukästen liegen Inhalte oft nur in <div>-Containern; manche Builder erlauben, das HTML-Tag eines Abschnitts umzustellen.

Codebeispiel

HTML

<body>
  <header>
    <nav aria-label="Hauptmenü">...</nav>
  </header>
  <main id="inhalt">...</main>
  <footer>
    <nav aria-label="Fußzeile">...</nav>
  </footer>
</body>

Weiterführende Quellen

• https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/
• https://www.w3.org/WAI/tutorials/page-structure/regions/
• https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html