html-einfach.de

Semantisches HTML · Grundlagen & Struktur

Landmarks & Dokument-Outline

Von Zuletzt geändert am

Zwei unsichtbare Strukturen bestimmen, wie gut sich eine Seite mit assistiver Technologie bedienen lässt: die Landmarks (große, benannte Seitenbereiche) und die Dokument-Outline (die Gliederung aus Überschriften). Wer beide versteht, baut Seiten, durch die sich Screenreader-Nutzende so schnell bewegen wie sehende Nutzende mit einem kurzen Blick auf die Seite.

Was sind Landmarks?

Landmarks sind Regionen, die Screenreadern eine grobe Karte der Seite geben. Nutzende können gezielt von Region zu Region springen – etwa direkt zur Navigation oder zum Hauptinhalt. Das Beste daran: Die wichtigsten Landmarks entstehen automatisch aus semantischem HTML, ganz ohne role-Attribute.

HTML-Element Erzeugte Landmark (Rolle)
<header> (direkt im <body>) banner
<nav> navigation
<main> main
<aside> complementary
<footer> (direkt im <body>) contentinfo
<form> mit zugänglichem Namen form
<section> mit zugänglichem Namen region

Genau deshalb plädiere ich dafür, zuerst die nativen Elemente zu setzen und ARIA-role-Attribute nur dort zu ergänzen, wo es keine Entsprechung gibt – das ist im Kern die erste Regel von ARIA. Ein <div role="main"> ist schlicht der Umweg zu dem, was <main> von sich aus mitbringt.

Landmarks benennen und unterscheiden

Tauchen gleiche Landmark-Typen mehrfach auf – etwa zwei <nav>-Bereiche –, sollten sie unterscheidbar sein. Ein zugänglicher Name über aria-label (oder aria-labelledby) schafft Klarheit:

<nav aria-label="Hauptnavigation">…</nav>
<nav aria-label="Brotkrümel">…</nav>

<aside aria-label="Weiterführende Links">…</aside>

Ein Screenreader liest dann „Hauptnavigation, Navigation“ statt zweimal nur „Navigation“. Eine <section> wird übrigens erst dann zur region-Landmark, wenn sie einen zugänglichen Namen hat – andernfalls bleibt sie ohne Landmark-Bedeutung.

Eine vollständige Landmark-Struktur

<body>
  <header>
    <a href="/index.html">Logo</a>
    <nav aria-label="Hauptnavigation">…</nav>
  </header>

  <main>
    <h1>Seitentitel</h1>
    <article>…</article>
    <aside aria-label="Verwandte Themen">…</aside>
  </main>

  <footer>…</footer>
</body>

Diese Seite besitzt fünf klar benannte Anlaufpunkte: banner, navigation, main, complementary und contentinfo. Idealerweise liegt jeder sichtbare Inhalt innerhalb einer Landmark – „herrenloser“ Text zwischen den Regionen ist ein typischer Schwachpunkt.

Die Dokument-Outline

Während Landmarks die großen Bereiche markieren, beschreibt die Outline die inhaltliche Gliederung – gebildet aus den Überschriften <h1> bis <h6>. Screenreader erzeugen daraus ein Inhaltsverzeichnis, über das Nutzende von Überschrift zu Überschrift springen. Studien und Umfragen zeigen seit Jahren: Überschriften sind für Screenreader-Nutzende eines der wichtigsten Mittel, sich auf einer Seite zu orientieren.

Damit diese Outline funktioniert, müssen die Ränge lückenlos und in der richtigen Reihenfolge vergeben sein:

<h1>Semantisches HTML</h1>
  <h2>Struktur-Elemente</h2>
    <h3>header</h3>
    <h3>nav</h3>
  <h2>Textauszeichnung</h2>

Ein Sprung von <h1> direkt zu <h3> (ohne <h2>) hinterlässt eine Lücke und irritiert die Navigation.

Ein wichtiger Hinweis zur Outline

Lange galt die Annahme, verschachtelte <section>-Elemente würden automatisch eine eigene Überschriften-Hierarchie erzeugen, sodass mehrere <h1> „sicher“ seien. Dieser Outline-Algorithmus wurde nie von Browsern umgesetzt und ist inzwischen aus der Spezifikation entfernt. In der Praxis zählt deshalb der tatsächliche Rang der Überschrift. Meine Empfehlung: pro Seite eine <h1> und von dort an saubere, fortlaufende Ränge. Mehr dazu unter Überschriften-Hierarchie.

Landmarks und Outline prüfen

Beides lässt sich gut testen, bevor überhaupt eine assistive Technologie zum Einsatz kommt:

  • Browser-Erweiterungen wie die „Landmarks“-Extension oder die Accessibility-Ansicht der Entwicklerwerkzeuge zeigen die Landmark-Regionen an.
  • Überschriften-Plugins oder die Outline-Ansicht listen die <h>-Struktur und decken Sprünge auf.
  • Screenreader (NVDA, VoiceOver) bieten eine Elementliste, in der sich Landmarks und Überschriften direkt durchblättern lassen.

Wenn die reine Überschriftenliste einer Seite schon ein verständliches Inhaltsverzeichnis ergibt, ist die Outline meist in Ordnung – diesen schnellen Test mache ich bei jeder neuen Vorlage.

Häufige Fehler

  • Kein <main> – der Hauptinhalt hat dann keine eigene Landmark.
  • Inhalte außerhalb jeder Landmark, etwa direkt zwischen <header> und <main>.
  • Mehrere gleiche Landmarks ohne aria-label, sodass sie ununterscheidbar sind.
  • Übersprungene Überschriftenränge (<h1> → <h3>), die die Outline zerreißen.
  • Überschriften nur fürs Aussehen gewählt, statt nach ihrer Bedeutung.

Fazit

Landmarks und Outline sind die unsichtbare Bedienoberfläche deiner Seite. Beide entstehen fast geschenkt, wenn du semantisch arbeitest: Die Struktur-Elemente liefern die Landmarks, eine saubere Überschriften-Hierarchie die Outline. Es lohnt sich, beides einmal mit einem Werkzeug sichtbar zu machen – oft erkennt man auf einen Blick, wo eine Seite ihre Nutzer verliert.