Landmark-Regionen: Seitenbereiche technisch eindeutig kennzeichnen
Ohne eindeutige main-Landmark kann Vorlese-Software nicht direkt zum Hauptinhalt springen. So kennzeichnen Sie Kopf-, Haupt- und Fußbereich sauber.
Inhaltsverzeichnis
Auf Ihrer Seite ist der Hauptinhaltsbereich technisch nicht eindeutig gekennzeichnet. Vorlese-Software kann dann nicht direkt zum Kern der Seite springen. EverAudit prüft Landmark-Regionen gegen WCAG 1.3.1 (Info and Relationships) und meldet fehlende, mehrfache oder nicht unterscheidbare Landmarks als Befund.
Was ist das Problem?#
Landmarks sind technisch ausgezeichnete Bereiche einer Seite — <header> (Rolle „banner"), <nav>, <main>, <aside> (Rolle „complementary") und <footer> (Rolle „contentinfo"). Sie erlauben Screenreader-Nutzern, sich per Tastenkürzel direkt zwischen diesen Bereichen zu bewegen, statt sich Element für Element durch die gesamte Seite zu arbeiten.
Zwei Fehlertypen sind hier relevant: landmark-one-main verlangt genau eine <main>-Landmark pro Seite — fehlt sie oder gibt es mehrere, kann Vorlese-Software den Hauptinhalt nicht eindeutig identifizieren. landmark-unique verlangt, dass gleichartige Landmarks — etwa zwei <nav>-Bereiche für Haupt- und Footer-Navigation — unterscheidbar benannt sind, sonst lassen sie sich nicht auseinanderhalten.
Warum prüft EverAudit das?#
Diese Regelfamilie wird als prio2-Befund geführt: Sie blockiert keine Funktion direkt, verschlechtert aber die Navigierbarkeit der gesamten Seite für Screenreader-Nutzer erheblich. Da Landmarks meist im globalen Layout-Template gesetzt werden, betrifft ein Fund hier typischerweise die komplette Website und lässt sich mit einem zentralen Fix beheben.
Welche Auswirkung hat das?#
Nutzer von Vorlese-Software müssen sich durch Nebenbereiche arbeiten, statt direkt zum Inhalt zu gelangen — bei jeder einzelnen Seite erneut. Bei mehreren gleichartigen, nicht unterscheidbaren Landmarks (z. B. zwei unbenannte Navigationen) verlieren Nutzer zusätzlich die Orientierung, welcher Bereich gerade angesteuert wird.
Wie beheben Sie fehlende oder doppelte Landmarks?#
Fassen Sie den Hauptinhalt in genau ein <main>-Element:
<!-- fehlt: kein <main> vorhanden -->
<body>
<header>…</header>
<div class="content">…</div>
<footer>…</footer>
</body>
<!-- korrigiert -->
<body>
<header>…</header>
<main>…</main>
<footer>…</footer>
</body>Mehrere gleichartige Landmarks eindeutig benennen:
<!-- zwei Navigationen ohne Unterscheidung -->
<nav>…Hauptmenü…</nav>
…
<nav>…Footer-Links…</nav>
<!-- korrigiert -->
<nav aria-label="Hauptnavigation">…Hauptmenü…</nav>
…
<nav aria-label="Fußzeilen-Navigation">…Footer-Links…</nav>Konkretes Vorgehen:
- Layout-Template auf native Landmark-Elemente prüfen —
<header>,<nav>,<main>,<aside>,<footer>statt generischer<div>-Container. - Genau eine
<main>-Landmark sicherstellen — bei Single-Page-Apps besonders wichtig, da beim Routenwechsel oft versehentlich ein zweites<main>gerendert wird. - Gleichartige Landmarks per
aria-labelunterscheiden — kurze, funktionale Bezeichnung („Hauptnavigation", „Breadcrumb"). - Inhalt außerhalb jeder Landmark vermeiden — jeder sichtbare Bereich sollte einer Landmark zugeordnet sein.
- Einmal im globalen Template fixen — da Landmarks strukturell sind, reicht in der Regel ein zentraler Fix für die gesamte Website.
Fazit#
Landmark-Regionen sind die grobe Karte Ihrer Seite für Screenreader-Nutzer — sie sitzen meist zentral im Layout-Template und lassen sich deshalb mit überschaubarem Aufwand website-weit korrigieren. Genau eine <main>-Landmark und unterscheidbare Namen für gleichartige Bereiche sind der wichtigste Hebel.
Häufige Fragen
Was ist eine Landmark?
Eine Landmark ist ein technisch ausgezeichneter Seitenbereich, den Screenreader gezielt ansteuern können — etwa header/role="banner", nav, main oder footer/role="contentinfo". Landmarks funktionieren wie eine Karte der Seite, über die Nutzer direkt zu einem Bereich springen können, ohne sich linear durchzuarbeiten.
Warum darf es nur eine main-Landmark geben?
Die main-Landmark markiert den eigentlichen Hauptinhalt einer Seite. Gibt es mehrere, kann ein Screenreader nicht eindeutig entscheiden, welcher Bereich der wirkliche Kern der Seite ist — die Sprung-Funktion 'zum Hauptinhalt' wird dadurch unzuverlässig.
Was bedeutet landmark-unique konkret?
Kommen mehrere gleichartige Landmarks vor — etwa zwei <nav>-Bereiche für Hauptnavigation und Footer-Navigation — müssen sie unterscheidbar benannt sein, z. B. per aria-label="Hauptnavigation" und aria-label="Fußzeilen-Navigation". Sonst kann ein Screenreader sie nicht auseinanderhalten.
Sind Landmarks dasselbe wie Überschriften?
Nein, beide ergänzen sich aber. Überschriften gliedern den Inhalt thematisch innerhalb der Seite, Landmarks gliedern die Seite in grobe strukturelle Bereiche (Kopf, Navigation, Hauptinhalt, Fuß). Ein Screenreader-Nutzer kann beide Navigationsmodi getrennt nutzen.
EverAudit Redaktion
Fachredaktion für Web-Qualität, Barrierefreiheit und DSGVO. Wir prüfen jeden Ratgeber gegen die Kriterien unserer Audit-Engine.