BFSG 4 Min. Lesezeit

ARIA Landmarks: Seitenstruktur für Screenreader optimieren

Wie ARIA Landmarks Screenreader-Nutzern helfen, eine Website zu navigieren. Praktische Anleitung für banner, main, navigation und weitere Rollen.

ARIA Landmarks helfen Screenreader-Nutzern, sich auf einer Website zu orientieren. Sie definieren Regionen wie Header, Navigation, Hauptinhalt und Footer — und machen eine Website barrierefrei.

Was sind ARIA Landmarks?

ARIA (Accessible Rich Internet Applications) Landmarks sind Rollen, die Bereiche einer Webseite identifizieren. Screenreader können diese Bereiche erkennen und Nutzern ermöglichen, direkt dorthin zu springen.

Warum sind Landmarks wichtig?

  1. Navigation: Nutzer können direkt zum Hauptinhalt springen
  2. Orientierung: Die Seitenstruktur wird verständlich
  3. Effizienz: Weniger Tab-Tastendrücke nötig
  4. WCAG-Compliance: Erfüllt Barrierefreiheitsanforderungen

SEO-Vorteil — Barrierefreie Websites haben oft bessere Nutzersignale (Verweildauer, Interaktion) — indirekte SEO-Vorteile.

Die 8 ARIA Landmark-Rollen

1. banner

Der Seitenkopf mit Logo und Hauptnavigation.

<header role="banner">
  <a href="/" aria-label="Zur Startseite">
    <img src="/logo.svg" alt="Firmenlogo">
  </a>
  <nav>...</nav>
</header>

Hinweis: <header> hat implizit role="banner", wenn es direktes Kind von <body> ist.

2. navigation

Navigationsbereiche der Website.

<nav role="navigation" aria-label="Hauptnavigation">
  <ul>
    <li><a href="/">Startseite</a></li>
    <li><a href="/leistungen/">Leistungen</a></li>
    <li><a href="/kontakt/">Kontakt</a></li>
  </ul>
</nav>

Bei mehreren Navigationen: aria-label verwenden, um sie zu unterscheiden.

<nav aria-label="Hauptnavigation">...</nav>
<nav aria-label="Footer-Navigation">...</nav>

3. main

Der Hauptinhalt der Seite — nur EINMAL pro Seite.

<main role="main" id="main-content">
  <h1>Seitentitel</h1>
  <p>Hauptinhalt...</p>
</main>

4. contentinfo

Der Footer mit Impressum, Kontakt usw.

<footer role="contentinfo">
  <p>(c) 2026 Beispiel GmbH</p>
  <nav aria-label="Footer-Navigation">...</nav>
</footer>

5. complementary

Ergänzende Inhalte, oft Sidebars.

<aside role="complementary" aria-label="Ähnliche Artikel">
  <h2>Das könnte auch interessieren</h2>
  <ul>...</ul>
</aside>

Suchfunktionen.

<search role="search" aria-label="Website-Suche">
  <form action="/suche">
    <input type="search" name="q" aria-label="Suchbegriff">
    <button type="submit">Suchen</button>
  </form>
</search>

7. region

Generische Bereiche, die einen Namen brauchen.

<section role="region" aria-labelledby="section-title">
  <h2 id="section-title">Themenbereich</h2>
  <p>...</p>
</section>

8. form

Wichtige Formulare (nicht jedes Formular).

<form role="form" aria-label="Kontaktformular">
  <fieldset>
    <legend>Ihre Nachricht</legend>
    ...
  </fieldset>
</form>

Semantisches HTML vs. ARIA-Rollen

Moderne HTML5-Elemente haben implizite Rollen:

HTML-ElementImplizite ARIA-Rolle
<header> (direkt in body)banner
<nav>navigation
<main>main
<footer> (direkt in body)contentinfo
<aside>complementary
<section> (mit Label)region
<form> (mit Label)form

Best Practice

<!-- BESSER: Semantisches HTML -->
<header>
  <nav aria-label="Hauptnavigation">...</nav>
</header>

<main>
  <article>...</article>
</main>

<footer>
  <nav aria-label="Footer-Links">...</nav>
</footer>

Erste Regel von ARIA — Wenn ein natives HTML-Element verwendet werden kann, das die Semantik bereits hat: dieses verwenden. ARIA ist ein Fallback, kein Ersatz.

Landmarks richtig labeln

aria-label vs. aria-labelledby

<!-- aria-label: Direkte Beschriftung -->
<nav aria-label="Hauptnavigation">

<!-- aria-labelledby: Verweist auf sichtbare Überschrift -->
<section aria-labelledby="services-heading">
  <h2 id="services-heading">Themenbereiche</h2>
</section>

Wann Labels verwenden?

  • Mehrere gleiche Landmarks: Unterscheiden
  • Keine sichtbare Überschrift: aria-label verwenden
  • Sichtbare Überschrift vorhanden: aria-labelledby verwenden

Vollständiges Seitenbeispiel

<!DOCTYPE html>
<html lang="de">
<head>
  <title>Beispiel mit ARIA Landmarks</title>
</head>
<body>

  <!-- Skip Links für Tastaturnutzer -->
  <a href="#main-content" class="skip-link">
    Zum Hauptinhalt springen
  </a>

  <!-- Banner/Header -->
  <header>
    <a href="/" aria-label="Zur Startseite">
      <img src="/logo.svg" alt="Firmenlogo">
    </a>
    <nav aria-label="Hauptnavigation">
      <ul>
        <li><a href="/">Startseite</a></li>
        <li><a href="/leistungen/">Leistungen</a></li>
        <li><a href="/blog/">Blog</a></li>
        <li><a href="/kontakt/">Kontakt</a></li>
      </ul>
    </nav>
  </header>

  <!-- Hauptinhalt -->
  <main id="main-content">
    <article>
      <h1>Seitentitel</h1>
      <p>Hauptinhalt der Seite...</p>
    </article>
  </main>

  <!-- Footer -->
  <footer>
    <nav aria-label="Footer-Navigation">
      <ul>
        <li><a href="/impressum/">Impressum</a></li>
        <li><a href="/datenschutz/">Datenschutz</a></li>
      </ul>
    </nav>
    <p>(c) 2026 Beispiel GmbH</p>
  </footer>

</body>
</html>

Skip Links erlauben das Überspringen von Navigation:

<a href="#main-content" class="skip-link">
  Zum Hauptinhalt springen
</a>
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 1rem;
  background: #000;
  color: #fff;
  z-index: 9999;
}

Landmarks testen

Mit Screenreader

  1. VoiceOver (Mac): Cmd + F5 aktivieren
  2. NVDA (Windows): Kostenlos downloadbar
  3. JAWS (Windows): Professionell, kostenpflichtig

Mit Browser-Erweiterungen

  • Landmarks (Chrome/Firefox): Zeigt alle Landmarks
  • axe DevTools: Umfassende Accessibility-Tests
  • WAVE: Visuelle Darstellung

Häufige Fehler

1. Mehrere main-Elemente

<!-- FALSCH -->
<main>Bereich 1</main>
<main>Bereich 2</main>

<!-- RICHTIG -->
<main>
  <section>Bereich 1</section>
  <section>Bereich 2</section>
</main>

2. Unlabeled multiple navigations

<!-- FALSCH -->
<nav>Hauptmenü</nav>
<nav>Footer-Links</nav>

<!-- RICHTIG -->
<nav aria-label="Hauptmenü">...</nav>
<nav aria-label="Footer-Links">...</nav>

3. Unnötige ARIA-Rollen

<!-- ÜBERFLÜSSIG -->
<header role="banner">

<!-- AUSREICHEND -->
<header>

Checkliste ARIA Landmarks

  • Genau ein <main>-Element
  • <header> und <footer> auf oberster Ebene
  • Mehrere <nav> mit aria-label unterschieden
  • Sichtbare Überschriften mit aria-labelledby verknüpft
  • Skip-Links implementiert
  • Mit Screenreader getestet
  • Keine redundanten ARIA-Rollen
  • Alle Landmarks haben sinnvollen Inhalt

Fazit

ARIA Landmarks sind fundamental für barrierefreie Websites. Mit semantischem HTML5 und gezieltem ARIA-Einsatz wird eine Seite für alle Nutzer zugänglich — und erfüllt WCAG-Anforderungen.

Verwandte Themen

Häufige Fragen

Muss role="banner" geschrieben werden, wenn <header> verwendet wird?

Nein, wenn <header> ein direktes Kind von <body> ist, hat es automatisch die Rolle “banner”.

Wie viele Landmarks sollte eine Seite haben?

Mindestens banner, navigation, main und contentinfo. Weitere (complementary, search) nach Bedarf.

Wirken sich ARIA Landmarks auf SEO aus?

Nicht direkt, aber indirekt: Bessere Nutzererfahrung für alle Besucher kann Engagement-Metriken verbessern.

Themen:

Accessibility ARIA Barrierefreiheit Screenreader WCAG wissen-portal

Individuelle Beratung gewünscht?

Wender Media unterstützt Sie bei der praktischen Umsetzung — von der technischen Konzeption bis zum Launch. Schreiben Sie uns, wir antworten innerhalb von 24 Stunden.

Jetzt Beratung anfragen

Kostenlos & unverbindlich — info@wendermedia.info

Verwandte Artikel