Die fünf Türme von Halle (Saale) als klare Orientierungspunkte am Abendhimmel
Technisches SEO 4 Min. Lesezeit

ARIA Landmarks: Struktur für Screenreader

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

Arnold Wender

Arnold Wender

SEO-Experte & Geschäftsinhaber

Aktualisiert: 26. Juni 2026
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. Seit das BFSG über ein Jahr in Kraft ist und die Marktüberwachung 2026 aktiv prüft, ist eine saubere Landmark-Struktur Teil der gesetzlich geforderten WCAG-2.1-AA-Konformität (Erfolgskriterium 1.3.1 “Info und Beziehungen” sowie 2.4.1 “Blöcke umgehen”).

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="/seo-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>

Hinweis: Das native <search>-Element wird seit 2023 von allen aktuellen Browsern unterstützt (Baseline). Da die Zuordnung der Rolle “search” in einigen Screenreader-Kombinationen noch nicht vollständig ankommt, ist das explizite role="search" als Absicherung weiterhin sinnvoll. Alternativ funktioniert klassisch <form role="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="/seo-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.

Sauberes, semantisches Markup zahlt zugleich auf Ihr technisches SEO ein. 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. Eine <section> wird übrigens nur dann zur Landmark “region”, wenn sie ein zugängliches Label (aria-label oder aria-labelledby) trägt.

Sind ARIA Landmarks für das BFSG verpflichtend?

Indirekt ja. Das BFSG verlangt über die harmonisierte Norm EN 301 549 die Konformitätsstufe WCAG 2.1 AA. Eine maschinenlesbare Seitenstruktur ist Voraussetzung für die Erfolgskriterien 1.3.1 (“Info und Beziehungen”) und 2.4.1 (“Blöcke umgehen”, typischerweise per Skip-Link plus Landmarks). Wer semantisches HTML5 korrekt einsetzt, erfüllt diese Anforderung weitgehend automatisch.

Schlagworte

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

SEO-Experte & Geschäftsinhaber

Arnold Wender ist Gründer und Geschäftsinhaber der SEO-Agentur Halle (Saale). Mit über 19 Jahren Erfahrung in der Suchmaschinenoptimierung hilft er Unternehmen in Sachsen-Anhalt, ihre Online-Sichtbarkeit nachhaltig zu verbessern und mehr qualifizierte Anfragen zu generieren.

Profil anzeigen

Fragen zu Ihrem Projekt?

Wir setzen genau das um, was Sie hier gelesen haben — persönlich, transparent und seit 2007. Mehr dazu unter Technisches SEO.

Kostenlose SEO-Analyse anfordern

Verwandte Artikel

Technisches SEO

AI Overviews und Google AI Mode: So wird Ihr Unternehmen in der KI-Suche zitiert

Technisches SEO

BFSG 2025: Barrierefreiheit wird Pflicht

Technisches SEO

Bildoptimierung: WebP, AVIF & Lazy Loading