ARIA-Landmarks: Seitenbereiche für Screenreader
Also called: Landmark-Rollen, Orientierungspunkte, Seitenregionen
Definition
ARIA-Landmarks sind Rollen wie banner, navigation, main und contentinfo, die die großen Bereiche einer Seite kennzeichnen. Screenreader listen sie auf, sodass Nutzer direkt zu jedem Bereich springen können.
ARIA-Landmarks kennzeichnen die großen Bereiche einer Webseite – Kopfbereich, Navigation, Hauptinhalt, Seitenleiste und Fußzeile – so, dass Software sie erkennt. Sehende Besucher erfassen diese Bereiche auf einen Blick. Screenreader-Nutzer bekommen stattdessen eine Liste der Orientierungspunkte und springen mit einer Taste direkt zu „Hauptbereich“ oder „Navigation“.
Was es bedeutet
Landmarks gehören zu WCAG 1.3.1 Info und Beziehungen, einem Kriterium der Stufe A in WCAG 2.2: Struktur, die optisch vermittelt wird, muss auch programmatisch ermittelbar sein. Das W3C nennt „ARIA-Landmarks zur Kennzeichnung von Seitenbereichen“ (ARIA11) und die passenden HTML-Elemente (H101) als ausreichende Techniken. Außerdem helfen Landmarks bei 2.4.1 Blöcke umgehen, weil Nutzer damit wiederkehrende Inhalte überspringen – eine Aufgabe, die sie mit dem Skip-Link teilen.
Die meisten Landmark-Rollen bekommen Sie mit semantischem HTML gratis. role-Attribute brauchen Sie nur, wenn Sie das native Element nicht verwenden können.
| Landmark-Rolle | HTML-Element | Hinweis |
|---|---|---|
| banner | <header> |
Nur, wenn nicht in article, aside, main, nav oder section |
| navigation | <nav> |
Bei mehreren benennen |
| main | <main> |
Einmal pro Seite |
| complementary | <aside> |
Ergänzende Inhalte, etwa eine Seitenleiste |
| contentinfo | <footer> |
Gleiche Bedingung wie bei header |
| search | <search> |
Für die Seitensuche |
| form | <form> |
Nur mit zugänglichem Namen |
| region | <section> |
Nur mit zugänglichem Namen |
Die ARIA Authoring Practices des W3C empfehlen, alle sichtbaren Inhalte in einem Landmark unterzubringen, damit beim Springen von Bereich zu Bereich nichts verloren geht.
Praxisbeispiele
<!-- Ohne Landmarks: nur namenlose divs -->
<div class="header">…</div>
<div class="menu">…</div>
<div class="content">…</div>
<!-- Mit Landmarks: semantisches HTML, kein zusätzliches ARIA nötig -->
<header>
<a href="/">Logo</a>
<nav aria-label="Haupt">…</nav>
</header>
<main>
<h1>Laufschuhe</h1>
…
</main>
<aside aria-labelledby="tipps">
<h2 id="tipps">Tipps zur Größe</h2>…
</aside>
<footer>
<nav aria-label="Fußzeile">…</nav>
</footer>Verweist aria-labelledby auf eine id, muss diese eindeutig sein – eine doppelte ID kann dem Landmark den falschen Namen geben.
Den Seitenrahmen aus <header>, <nav>, <main>, <aside> und <footer> bauen, genau ein <main> verwenden und mehrfach vorkommende Landmarks benennen.
Zusätzlich role="main" auf <main> setzen, jede kleine Box in ein <section aria-label> packen oder Cookie-Banner und Aktionsleisten außerhalb aller Landmarks lassen.
Landmarks und Überschriften ergänzen sich: Landmarks liefern die grobe Karte, Überschriften die Details in jedem Bereich. Eine übersprungene Überschriftenebene innerhalb von main stört die Gliederung trotzdem.
So prüfen Sie ARIA-Landmarks
Häufige Fragen
Was sind ARIA-Landmarks?
Rollen, die die großen Bereiche einer Seite kennzeichnen: banner, navigation, main, complementary, contentinfo, search, form und region. Screenreader listen sie auf, damit Nutzer direkt zu einem Bereich springen können.
Brauche ich role-Attribute, wenn ich HTML5-Elemente nutze?
Nein. <header>, <nav>, <main>, <aside> und <footer> entsprechen bereits Landmark-Rollen. Dieselbe role noch einmal zu setzen, ist überflüssig. Verwenden Sie role nur dort, wo Sie das Element nicht ändern können.
Schreibt WCAG ARIA-Landmarks vor?
Nicht ausdrücklich. Landmarks sind eine ausreichende Technik für 1.3.1 Info und Beziehungen und für 2.4.1 Blöcke umgehen. In der Praxis sind sie der häufigste und zuverlässigste Weg, Seitenbereiche erkennbar zu machen.
Wie viele main-Landmarks darf eine Seite haben?
Eines. Das W3C empfiehlt genau ein main pro Seite und auf oberster Ebene höchstens ein banner und ein contentinfo.
Wie finde ich fehlende Landmarks auf meiner Website?
Prüfen Sie je Vorlage eine Seite in den DevTools. Einen schnellen Überblick über Strukturfehler auf Ihrer Startseite gibt Ihnen der kostenlose WCAG-Scanner.
Related terms
Skip-Link: Direkt zum Hauptinhalt springen
Ein Skip-Link ist ein Link ganz oben auf der Seite, der direkt zum Hauptinhalt springt. So müssen Tastatur- und Screenreader-Nutzer nicht auf jeder Seite das ganze Menü durchlaufen. Er ist eine ausreichende Technik für WCAG 2.4.1.
Read definition: Skip-Link: Direkt zum Hauptinhalt springenÜbersprungene Überschriftenebene: einfach erklärt
Eine übersprungene Überschriftenebene ist ein Sprung um mehr als eine Stufe nach unten in der Überschriften-Hierarchie, etwa von h2 direkt zu h4. Wer per Screenreader über Überschriften navigiert, vermutet dann einen fehlenden Abschnitt.
Read definition: Übersprungene Überschriftenebene: einfach erklärtTastaturbedienung: WCAG 2.1.1 einfach erklärt
Tastaturbedienung bedeutet, dass sich jede Funktion einer Website allein mit der Tastatur erreichen und bedienen lässt – meist mit Tab, Umschalt+Tab, Enter, Leertaste und Pfeiltasten. WCAG 2.1.1 verlangt das auf Stufe A.
Read definition: Tastaturbedienung: WCAG 2.1.1 einfach erklärtDoppelte ID: Warum sie Barrierefreiheit noch stört
Eine doppelte ID ist ein id-Wert, der auf derselben Seite an mehr als einem Element steht. Labels, ARIA-Attribute und Sprungmarken, die auf diese id verweisen, erreichen dann nur das erste Element – andere Felder verlieren Namen oder Beschreibung.
Read definition: Doppelte ID: Warum sie Barrierefreiheit noch stört