Was sind Landmarken-Bereiche?

Landmarken sind die strukturellen Hauptbereiche einer Seite – Kopfbereich, Navigation, Hauptinhalt, ergänzender Bereich und Fußbereich –, die assistiver Technologie über native HTML5-Elemente oder ARIA-`role`-Attribute bereitgestellt werden.

Wie viele main-Landmarken sollte eine Seite haben?

Genau eine. Mehrere ` `-Landmarken oder Inhalte außerhalb jeder Landmarke zerstören die Sprungfunktion zwischen Bereichen, auf die Screenreader-Nutzer angewiesen sind.

Wie behebe ich Landmarken-Probleme?

Fassen Sie den Hauptinhalt in ein einzelnes ` `, verwenden Sie ` `, ` ` und ` ` für diese Bereiche und stellen Sie sicher, dass keine relevanten Inhalte außerhalb einer Landmarke stehen.

Häufige Verstöße

Landmarken- und Bereichsprobleme: Screenreadern eine Karte der Seite geben

Die meisten Screenreader bieten eine Abkürzung, um direkt zwischen den wichtigsten strukturellen Bereichen einer Seite zu springen – Header, Navigation, Hauptinhalt, Seitenleiste, Fußzeile –, genauso wie das Auge eines sehenden Nutzers direkt zu dem Teil der Seite springt, den er braucht, ohne alles dazwischen zu lesen. Diese Abkürzung funktioniert nur, wenn diese Bereiche tatsächlich als Landmarken ausgezeichnet sind, entweder über semantische HTML5-Elemente (<header>, <nav>, <main>, <footer>, <aside>) oder deren ARIA-Äquivalente (role="banner", role="navigation", role="main", role="contentinfo", role="complementary").

Dies fällt unter WCAG-Erfolgskriterium 1.3.1 (Info und Beziehungen), Stufe A.

Die zwei häufigsten Fehler

Inhalt, der in überhaupt keiner Landmarke liegt. Eine Seite, die vollständig aus generischen <div>s ohne semantische Struktur gebaut ist, bietet einem Screenreader-Nutzer nichts, wozwischen er springen kann – jeder Inhaltsteil ist gleichermaßen undifferenziert, was ein langsames, lineares Durchlesen der gesamten Seite erzwingt, nur um den Hauptinhalt zu finden.

<!-- Vorher: keine Struktur, die ein Screenreader zur Navigation nutzen kann -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>

<!-- Nachher: echte Landmarken -->
<header>...</header>
<nav>...</nav>
<main>...</main>

Mehr als ein <main> (oder role="main") auf einer Seite. Eine Seite sollte genau eine Hauptlandmarke haben, die den primären Inhalt identifiziert – keine zu haben bedeutet, dass es überhaupt keine "direkt zum Inhalt springen"-Abkürzung gibt, und zwei oder mehr zu haben lässt einen Screenreader-Nutzer im Unklaren, welcher davon tatsächlich der primäre Inhaltsbereich ist.

Warum `<div class="nav">` nicht gleichbedeutend mit `<nav>` ist

Dies ist ein wiederkehrendes Thema bei fast jeder Barrierefreiheitskorrektur: Ein CSS-Klassenname vermittelt assistiver Technologie nichts. class="nav" ist rein ein Styling-Anker; <nav> ist ein semantisches Element mit einer im Accessibility-Tree eingebauten Bedeutung, die jeder Screenreader automatisch versteht. Das visuelle Ergebnis eines klassenbenannten <div> und eines echten <nav>-Elements kann pixelidentisch sein, während beide für einen Screenreader-Nutzer Welten auseinanderliegen.

Eine praktische Landmarken-Checkliste

Ein <header> (oder role="banner") für website-weite Marken-/Header-Inhalte
Ein <nav> pro eigenständigem Navigationsmenü (ein Header-Nav und ein Footer-Nav können beide existieren, jeweils beschriftet, wenn mehr als eines vorhanden ist: <nav aria-label="Fußzeile">)
Genau ein <main>, das den primären, einzigartigen Inhalt der Seite umschließt
Ein <footer> (oder role="contentinfo") für website-weiten Fußzeileninhalt
<aside> für tatsächlich nebensächlichen Inhalt (eine Seitenleiste, ein Widget mit verwandten Links) – nicht für Inhalt, der eigentlich Teil des Hauptflusses ist

Dies in einer gemeinsamen Website-Vorlage korrekt umzusetzen behebt den Verstoß auf allen Seiten gleichzeitig, genau wie ein einzelnes lang-Attribut oder ein Sprung-Link.

Offizielle Referenzen

Häufige Fragen

Was sind Landmarken-Bereiche?: Landmarken sind die strukturellen Hauptbereiche einer Seite – Kopfbereich, Navigation, Hauptinhalt, ergänzender Bereich und Fußbereich –, die assistiver Technologie über native HTML5-Elemente oder ARIA-`role`-Attribute bereitgestellt werden.
Wie viele main-Landmarken sollte eine Seite haben?: Genau eine. Mehrere `<main>`-Landmarken oder Inhalte außerhalb jeder Landmarke zerstören die Sprungfunktion zwischen Bereichen, auf die Screenreader-Nutzer angewiesen sind.
Wie behebe ich Landmarken-Probleme?: Fassen Sie den Hauptinhalt in ein einzelnes `<main>`, verwenden Sie `<header>`, `<nav>` und `<footer>` für diese Bereiche und stellen Sie sicher, dass keine relevanten Inhalte außerhalb einer Landmarke stehen.