Was Landmarken sind
Landmarken teilen eine Seite in Bereiche wie Kopf, Navigation, Hauptinhalt und Fuß. Screenreader und Tastatur springen damit direkt dorthin, wo der Inhalt beginnt.
So funktioniert es
Landmarken sind Bereiche einer Seite, die Hilfsmittel als solche erkennen. HTML hat dafür eigene Elemente:
headerfür den Kopf mit Logo und Suche,navfür Navigationen,mainfür den eigentlichen Inhalt,asidefür Ergänzendes neben dem Inhalt,footerfür den Fuß mit Impressum und Kontakt.
Ein Screenreader listet diese Bereiche auf und springt auf Tastendruck hinein. Am wichtigsten ist main: Damit überspringt man Kopf und Menü, die auf jeder Seite gleich sind, und landet beim Inhalt. Ohne main muss man sich bei jedem Seitenwechsel erst durch dieselbe Navigation arbeiten.
WCAG 2.2 verlangt in Kriterium 2.4.1 einen Weg, wiederkehrende Blöcke zu überspringen. Landmarken sind ein solcher Weg, ein Link „Zum Inhalt springen“ ganz oben ein zweiter, der auch Tastaturnutzern ohne Screenreader hilft.
Worauf es ankommt
- Genau ein sichtbares main. Es umschließt den Inhalt, der diese Seite von anderen unterscheidet. Kopf, Navigation und Fuß stehen davor und danach, nicht darin.
- Kein zweites main. Zwei sichtbare
main-Elemente, etwa aus verschachtelten Vorlagen, verwirren mehr, als sie helfen. Ein weiteres ist nur erlaubt, wenn es mithiddenausgeblendet ist. - Mehrere Navigationen mit Namen. Gibt es Haupt- und Fußmenü, unterscheidet ein
aria-labelsie:<nav aria-label="Hauptmenü">. - Elemente statt Rollen.
<div role="main">funktioniert, das Elementmainist aber einfacher und gleichwertig.
Ein Gerüst sieht so aus:
<body>
<a href="#inhalt">Zum Inhalt springen</a>
<header>…</header>
<nav aria-label="Hauptmenü">…</nav>
<main id="inhalt">…</main>
<footer>…</footer>
</body>So richtest du es ein
Landmarken stecken im Seitengerüst, das alle Seiten teilen, also im Theme oder in der Layout-Vorlage, nicht im Inhalt einzelner Seiten. In WordPress-Block-Themes legst du im Website-Editor beim Gruppen-Block unter „Erweitert“ das HTML-Element fest, etwa main. Bei klassischen Themes und eigenen Vorlagen ändert es, wer das Theme pflegt, meist deine Agentur, in einer Stelle für alle Seiten.