Was ist mit ` ` — zählt das als Landmark?

Nur wenn es einen zugänglichen Namen hat (aria-label oder aria-labelledby). Ein nacktes ist nur eine generische Region. Wenn der Abschnitt nicht im Landmarks-Menü auftauchen muss, nimm stattdessen .

ARIA-Landmarks - MetricSpot Docs

Q: Brauche ich `role="banner"` und `role="contentinfo"` auf ` ` und ` `?

Nein. Wenn und direkte Kinder von sind, legen Browser sie automatisch als banner und contentinfo offen. Die Rolle hinzuzufügen ist redundant und kann manche ältere Screenreader verwirren.

Was diese Prüfung macht

Parst das gerenderte HTML auf Landmark-Regionen: die Sectioning-Elemente <main>, <nav>, <header>, <footer>, <aside>, <form>, <section> (mit zugänglichem Namen) und deren ARIA-Äquivalente (role="main", role="navigation" usw.). Die Prüfung schlägt fehl, wenn die Seite kein <main> (oder role="main") hat.

Warum es zählt

Screenreader bieten ein Landmarks-Menü an — JAWS nutzt R, NVDA nutzt D, VoiceOver nutzt den Rotor. Eine Nutzerin landet auf deiner Seite und drückt eine Taste, um zum Hauptinhalt zu springen — Header und globale Navigation werden übersprungen.

Ohne Landmarks existiert diese Abkürzung nicht. Die Nutzerin muss sich durch jeden Link im Header pfeilen, durch jedes Promo-Banner, jedes Login-Dropdown, jeden Sprachumschalter — bevor sie den Artikel erreicht, für den sie gekommen ist. Auf einer typischen Marketing-Seite sind das 30 bis 60 Audio-Elemente vor dem ersten brauchbaren Satz.

Landmarks sind außerdem der Weg, wie WCAG 2.1 Erfolgskriterium 1.3.1 (Info und Beziehungen) für Seitenstruktur erfüllt wird — und wie Audits zum European Accessibility Act erwarten, dass navigierbare Regionen programmatisch verfügbar sind.

So behebst du es

Das Minimum: Wickle deinen Hauptinhalt in <main>. Setze <nav> um die primäre Navigation, <header> für den Site-Header, <footer> für den Site-Footer.

HTML:

<body>
  <header>
    <nav aria-label="Primary">...</nav>
  </header>
  <main>
    <h1>Page title</h1>
    <article>...</article>
    <aside aria-label="Related articles">...</aside>
  </main>
  <footer>...</footer>
</body>

Regeln, die häufig stolpern lassen:

Nur ein <main> pro Seite. Mehrere <main>-Elemente zerstören die Landmark-Karte.
Mehrere <nav>-Regionen brauchen zugängliche Namen, damit ein Screenreader sie auseinanderhalten kann. Nutze aria-label="Primary", aria-label="Breadcrumb", aria-label="Footer" — lass sie nicht unbenannt.
<header> und <footer> zählen nur als Banner-/Contentinfo-Landmarks, wenn sie direkte Kinder von <body> sind. In einem <article> sind sie nur Sectioning-Inhalt, keine Landmarks.
Setze nicht redundant role="main" auf <main>. Das native Element legt die Rolle bereits offen.

Next.js (App Router):

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="de">
      <body>
        <header><SiteNav /></header>
        <main>{children}</main>
        <footer><SiteFooter /></footer>
      </body>
    </html>
  );
}

Astro:

---
// src/layouts/Base.astro
---
<html lang="de">
  <body>
    <header><Nav /></header>
    <main><slot /></main>
    <footer><Footer /></footer>
  </body>
</html>

WordPress: Moderne Block-Themes wickeln den Beitragsinhalt automatisch in <main>; klassische Themes brauchen <?php wp_body_open(); ?> gefolgt von deinem <main>-Wrapper in header.php und </main> vor get_footer().

Wenn du das Markup nicht ändern kannst (CMS-Lock-in, eingebettetes Widget), füge role="main" zum bestehenden Wrapper-Div hinzu — gleicher Effekt für assistive Technologie, weniger ideal für Parser.

Kombiniere das mit Seitensprache deklarieren und Formular-Labels — die drei zusammen decken die meisten Accessibility-Niedrighängenden-Früchte ab.

Häufig gestellte Fragen

Brauche ich `role="banner"` und `role="contentinfo"` auf `<header>` und `<footer>`?

Nein. Wenn <header> und <footer> direkte Kinder von <body> sind, legen Browser sie automatisch als banner und contentinfo offen. Die Rolle hinzuzufügen ist redundant und kann manche ältere Screenreader verwirren.

Was ist mit `<section>` — zählt das als Landmark?

Nur wenn es einen zugänglichen Namen hat (aria-label oder aria-labelledby). Ein nacktes <section> ist nur eine generische Region. Wenn der Abschnitt nicht im Landmarks-Menü auftauchen muss, nimm stattdessen <div>.

Wirken sich Landmarks auf SEO aus?

Indirekt. Google rankt nicht anhand von Landmarks, aber es nutzt die HTML5-Gliederung (besonders <main> und <article>), um den primären Inhalt vom Chrome zu trennen. Saubere Landmark-Struktur korreliert mit sauberer Extraktion in AI Overviews und Featured Snippets.