# ARIA-Landmarks: Seitenbereiche für Screenreader

Source: https://allyway.ai/de/glossary/aria-landmarks

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](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html), einem Kriterium der Stufe A in [WCAG 2.2](https://allyway.ai/de/regulations/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](https://allyway.ai/de/glossary/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 |

> **Tip:** > **Doppelte Landmarks benennen – ohne die Rolle zu wiederholen**
> Bei zwei `<nav>`-Elementen geben Sie jedem einen eigenen Namen, etwa `aria-label="Haupt"` und `aria-label="Fußzeile"`. Screenreader sagen „Navigation“ ohnehin an – „Hauptnavigation“ wäre doppelt zu hören.

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

```html title="Beispiel"
<!-- 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](https://allyway.ai/de/glossary/doppelte-id) kann dem Landmark den falschen Namen geben.

**Do:** Do

Den Seitenrahmen aus `<header>`, `<nav>`, `<main>`, `<aside>` und `<footer>` bauen, genau ein `<main>` verwenden und mehrfach vorkommende Landmarks benennen.

**Don't:** Don't

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](https://allyway.ai/de/glossary/uebersprungene-ueberschriftenebene) innerhalb von `main` stört die Gliederung trotzdem.

## So prüfen Sie ARIA-Landmarks



## Häufige Fragen

Q: Was sind ARIA-Landmarks?
A: 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.

Q: Brauche ich role-Attribute, wenn ich HTML5-Elemente nutze?
A: 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.

Q: Schreibt WCAG ARIA-Landmarks vor?
A: 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.

Q: Wie viele main-Landmarks darf eine Seite haben?
A: Eines. Das W3C empfiehlt genau ein `main` pro Seite und auf oberster Ebene höchstens ein banner und ein contentinfo.

Q: Wie finde ich fehlende Landmarks auf meiner Website?
A: Prüfen Sie je Vorlage eine Seite in den DevTools. Einen schnellen Überblick über Strukturfehler auf Ihrer Startseite gibt Ihnen der [kostenlose WCAG-Scanner](https://allyway.ai/de/free-wcag-accessibility-scanner-for-websites).