ARIA Landmarks für barrierefreie Websites
Technisches SEO 10 Min. Lesezeit

ARIA Landmarks: Seitenstruktur für Screenreader optimieren

Erfahren Sie, wie Sie mit ARIA Landmarks Ihre Website für Screenreader-Nutzer zugänglich machen. Praktische Anleitung mit Beispielen für banner, main, navigation und mehr.

Arnold Wender

Arnold Wender

SEO-Experte & Gruender

Inhaltsverzeichnis

ARIA Landmarks helfen Screenreader-Nutzern, sich auf Ihrer Website zu orientieren. Sie definieren Regionen wie Header, Navigation, Hauptinhalt und Footer - und machen Ihre 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

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: Verwenden Sie aria-label, 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, etc.

<footer role="contentinfo">
  <p>© 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 Sie 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">Unsere Leistungen</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>

<!-- EXPLIZIT nur wenn nötig -->
<div role="banner">...</div>

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">Unsere Leistungen</h2>
</section>

Wann Labels verwenden?

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

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>
    <search aria-label="Website-Suche">
      <form action="/suche">
        <input type="search" name="q" placeholder="Suchen...">
        <button type="submit">Los</button>
      </form>
    </search>
  </header>

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

  <!-- Sidebar -->
  <aside aria-label="Ergänzende Informationen">
    <section aria-labelledby="related-heading">
      <h2 id="related-heading">Verwandte Artikel</h2>
      <ul>...</ul>
    </section>
  </aside>

  <!-- 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>© 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

Mit Chrome DevTools

  1. F12 → Elements
  2. Accessibility-Panel öffnen
  3. “Full accessibility tree” aktivieren

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>

4. Landmarks ohne Inhalt

Leere Landmarks verwirren Screenreader-Nutzer.

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 machen Sie Ihre Seite für alle Nutzer zugänglich - und erfüllen WCAG-Anforderungen.

Kombinieren Sie Landmarks mit anderen OnPage-Optimierungen für eine technisch perfekte Website.

FAQ

Muss ich role=“banner” schreiben, wenn ich <header> verwende?

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.

Soll ich jede <section> als Landmark markieren?

Nein, nur wenn sie wichtig genug ist, um als eigener Bereich erkannt zu werden. Zu viele Landmarks sind kontraproduktiv.

Schlagworte

#Accessibility #ARIA #Barrierefreiheit #Screenreader #WCAG
Arnold Wender, SEO-Experte

SEO-Experte & Gruender

Arnold Wender ist Gruender und Geschaeftsfuehrer der SEO-Agentur Duisburg. Mit ueber 18 Jahren Erfahrung in der Suchmaschinenoptimierung hilft er Unternehmen, ihre Online-Sichtbarkeit nachhaltig zu verbessern.

Profil anzeigen