Stellen wir uns ein großes Gebäude vor. Viele Türen, viele Räume – aber keine Schilder. Kein Hinweis auf Eingang, Ausgang oder Information. Wer sich darin zurechtfinden soll, muss jede Tür einzeln ausprobieren. Orientierung fühlt sich anders an, oder?
Ähnlich wirken Webseiten ohne klare Struktur. Sehende Menschen können sich oft am visuellen Layout orientieren: oben ein Menü, daneben eine Spalte, unten der Footer. Assistive Technologien nehmen dieses Layout jedoch nicht wahr. Für Screenreader-Nutzer besteht eine Seite idealerweise aus Überschriften, Listen, Links – und aus strukturellen Bereichen, zu denen direkt gesprungen werden kann.
Genau hier kommen Landmarks ins Spiel.
Landmarks sind gewissermaßen die Wegweiser einer Webseite. Sie markieren wichtige Bereiche wie die Navigation, den Hauptinhalt, ergänzende Informationen oder den Seitenfuß. Screenreader stellen diese Bereiche als Navigationsliste bereit. So wird es möglich, gezielt zum Hauptinhalt oder zur Navigation zu springen, ohne sich durch alle Inhalte dazwischen arbeiten zu müssen.
Heute schauen wir uns an,
- welche Landmarks es gibt,
- wie sie automatisch durch richtig geschriebenes HTML entstehen
- und wann stattdessen
role-Attribute eingesetzt werden.
Damit schließen wir den <header> ab und wechseln in den <main>-Bereich.
Was sind Landmarks überhaupt?
Nicht jede Struktur auf einer Webseite ist automatisch auch eine Orientierungshilfe. Spalten, Kästen oder farbige Hintergründe helfen vor allem visuell. Das ist nicht schlecht, für assistive Technologien zählen aber semantische Bereiche – also Abschnitte, die im Code als funktionale Teile der Seite erkennbar sind.
Genau das sind Landmarks.
Landmarks kennzeichnen übergeordnete Bereiche einer Seite, die für das Verständnis und die Navigation wichtig sind. Dazu gehören zum Beispiel:
- die Hauptnavigation
- der zentrale Seiteninhalt
- ergänzende Informationen
- der Seitenfuß
- eine Suchfunktion
Screenreader können diese Bereiche auslesen und als Liste anbieten. Statt sich linear durch alle Inhalte zu bewegen, lässt sich gezielt sagen: „Zum Hauptinhalt“ oder „Zur Navigation“. Landmarks funktionieren damit wie Sprungmarken auf struktureller Ebene.
Wichtig ist: Landmarks beschreiben Funktionen, nicht Gestaltung. Ein Bereich ist nicht deshalb eine Landmark, weil er links steht oder grau hinterlegt ist, sondern weil er im Seitenaufbau eine bestimmte Rolle erfüllt. Landmarks machen also sichtbar, wie eine Seite gedacht ist. Sie bilden das Grundgerüst, an dem sich Menschen und Technik orientieren können – unabhängig davon, wie das Layout aussieht.
Landmarks durch HTML-Elemente
HTML5 bietet von Haus aus eine Reihe von semantischen Elementen, die automatisch als Landmarks erkannt werden. Sie markieren die Hauptbereiche einer Seite, erleichtern die Orientierung und reduzieren die Abhängigkeit von visuellen Layouts. Zu den wichtigsten gehören:
| HTML-Element | Standard-Landmark-Rolle | Zweck |
|---|---|---|
<header> | banner | Kopfbereich der Seite, enthält oft Logo oder Intro |
<nav> | navigation | Haupt- oder Zusatznavigation |
<main> | main | zentraler Seiteninhalt, nur einmal pro Seite |
<aside> | complementary | ergänzende Inhalte, z. B. Sidebar oder Hinweise |
<footer> | contentinfo | Fußbereich, z. B. Impressum, Kontakt |
<section> | region (bei Name) | thematisch zusammenhängender Inhaltsbereich |
<main> – das Herzstück
Das <main>-Element markiert den Hauptinhalt der Seite. Es sollte nur einmal pro Seite vorkommen und den Kerninhalt enthalten, während Navigation, Header, Footer oder Sidebars außen vor bleiben. Assistive Technologien springen gezielt zu <main> – das macht es zu einem zentralen Orientierungspunkt.
<header><footer> – Kopf- und Fußbereich richtig einsetzen
<header>Header- und Footer-Elemente dienen dazu, Kopf- bzw. Fußbereiche zu kennzeichnen. Anders als <main> können sie mehrfach auf einer Seite vorkommen, zum Beispiel innerhalb einzelner <section>– oder <article>-Elemente.
Nur die Header und Footer auf oberster Ebene im <body> werden automatisch als Landmarks (banner bzw. contentinfo) erkannt. Alle weiteren Header oder Footer innerhalb von Sections oder Artikeln dienen lediglich der strukturellen Gruppierung und werden von Screenreadern nicht automatisch als Landmark interpretiert. So wird verhindert, dass jede kleine Kopf- oder Fußzeile die Landmark-Navigation unnötig aufbläht.
<section> – nützlich wenn richtig benannt
Das <section>-Element gruppiert Inhalte mit einem gemeinsamen Thema. Im Gegensatz zu <main> oder <nav> hat <section> keine automatisch sichtbare Landmark-Rolle, sondern wird nur dann als Landmark (role="region") erkannt, wenn es einen zugänglichen Namen erhält – z. B. über:
aria-labelledbyaria-labeltitle(nicht empfohlen, da nicht überall zuverlässig)
Auch wenn man es gut meint, <section> sollte nicht übermäßig als Landmark genutzt werden. Überschriften (<h1> bis <h6>) zeigen schon die Struktur eines Dokuments an. Zu viele Regionen erschweren die Orientierung eher, weil alles plötzlich „besonders“ ist und damit ja auch wieder nichts.
Landmarks mit ARIA
Neben den HTML5-Elementen lassen sich Landmarks auch mit ARIA-Rollen definieren. So können Bereiche einer Seite für assistive Technologien als Landmark erkannt werden, ohne dass ein spezielles HTML-Element notwendig ist.
Zum Beispiel:
<div role="main">…</div>
<div role="navigation">…</div>
<div role="complementary">…</div>
<form role="search">…</form>
Mit diesen Rollen können Entwickler die Landmark-Struktur auf eine zusätzliche Art abbilden. Es gibt sogar einige Rollen, die kein passendes HTML-Äquivalent besitzen.
| role | Zweck |
|---|---|
| search | Bereich für eine Suchfunktion innerhalb der Seite |
| form | Formularbereich mit eigener Bedeutung |
| region | markierter Inhaltsbereich mit Name, z. B. für besondere Sektionen |
Diese Rollen existieren nur über ARIA und ermöglichen es, Landmarken auch dann klar zu definieren, wenn kein entsprechendes HTML5-Element verfügbar ist.
HTML oder ARIA: Wann welcher Weg sinnvoll ist
Wenn es um Landmarks geht, gibt es zwei Wege: HTML5-Elemente oder ARIA-Rollen. Beide helfen Nutzern mit Screenreadern, sich auf der Seite zurechtzufinden.
Ich empfehle, zuerst auf HTML zu setzen. Die Elemente sind semantisch eingebaut, der Code bleibt übersichtlich, und alles funktioniert direkt. ARIA-Rollen sind eher ein Umweg, um Landmarks zusätzlich zu markieren – praktisch, wenn bestimmte Bereiche keine passenden HTML-Elemente haben.
Die erste Regel von ARIA sagt es sehr treffend:
„Don’t use ARIA if you can use native HTML instead.“
Das heißt: <main> statt role="main", <nav> statt role="navigation". ARIA-Rollen ergänzen also HTML, ersetzen es aber nicht.
Praktische Empfehlung
- HTML zuerst verwenden:
<main>,<nav>,<aside>,<header>und<footer>decken die meisten Landmarks ab. Der Code ist kürzer und sehr gut lesbar. Auch am schließenden Element erkennt man die Struktur und veirrt sich nicht im<div>-Dschungel. - ARIA ergänzend einsetzen: Rollen wie
search,formoderregionmarkieren zusätzliche Bereiche, die HTML nicht direkt abbildet. - Nicht überladen: Zu viele Landmarks – egal ob HTML oder ARIA – machen es eher unübersichtlich.
Mit diesem Ansatz wird die Seite klar strukturiert und bleibt für alle gut navigierbar.
Fazit – ordentlich beschildert findet sich jeder zurrecht
Nach dem <main> folgt im <footer> jetzt das Fazit.
So, wie dieser Artikel inhaltlich in mehrere Bereiche gegliedert ist und jeder direkt zum Fazit hätte springen können, brauchen auch Websites die Möglichkeit, sich wiederholende Bereich gezielt zu überspringen. Oder eben bewusst anzusteuern.
Damit wir eben nicht jede Tür öffnen müssen um zu schauen, was dahinter steckt.
Mit wenig Aufwand aus Sicht der Entwicklung kann hier die Bedienbarkeit einer Website erheblich verbessert werden. Es ist nicht immer so leicht, nutzen Sie die Gelegenheit.