Zu Content springen
Deutsch
Kontakt
  • Es gibt keine Vorschläge, da das Suchfeld leer ist.

Best practice: HTML5-Landmark-Elemente werden zur Verbesserung der Navigation verwendet  (WCAG 1.3.1 + WCAG 2.4.1)

use-landmarks

Das bedeutet

HTML5-Landmark-Elemente wie <header>, <main>, <nav>, <aside> und <footer> helfen, den Inhalt einer Seite semantisch zu strukturieren. Sie geben assistiven Technologien wie Screenreadern Orientierungspunkte, damit Nutzer und Nutzerinnen schneller zu bestimmten Bereichen springen können – etwa zur Hauptnavigation oder zum Seiteninhalt.

 

Auswirkung

Fehlen Landmark-Elemente, ist die Tastatur- und Screenreader-Navigation weniger effizient. Nutzerinnen und Nutzer müssen sich mühsam durch alle Inhalte bewegen, um bestimmte Bereiche zu finden.
Eine klare Landmark-Struktur verbessert die Orientierung erheblich und erfüllt WCAG 1.3.1 (A) Info und Beziehungen sowie WCAG 2.4.1 (A) Blöcke überspringen.

 

Empfehlung

  • Verwenden Sie Landmark-Elemente zur logischen Gliederung der Seite:

    • <header> für Kopfzeilen- oder Markenbereich

    • <nav> für Navigationselemente

    • <main> für den Hauptinhalt

    • <aside> für ergänzende Inhalte

    • <footer> für Fußbereich oder rechtliche Hinweise

  • Nutzen Sie nur ein <main>-Element pro Seite.

  • Falls Sie mehrere Bereiche desselben Typs haben (z. B. mehrere <nav>-Elemente), kennzeichnen Sie diese mit aria-label, z. B. aria-label="Hauptnavigation".

  • Testen Sie mit einem Screenreader (z. B. NVDA oder VoiceOver), ob die Bereiche korrekt angesagt werden.

 

Beispiele

Problematisch:

<div class="header">Willkommen</div>
<div class="navigation">...</div>
<div class="content">Hauptinhalt</div>
<div class="footer">© 2024</div>

 

Die Struktur verwendet nur <div>-Container – Screenreader können die Bereiche nicht unterscheiden.

Besser:

<header>Willkommen</header>
<nav aria-label="Hauptnavigation">...</nav>
<main>Hauptinhalt</main>
<footer>© 2024</footer>

 

Die Seite ist jetzt semantisch korrekt aufgebaut. Screenreader können direkt zwischen den Bereichen wechseln.

 

Hinweis

Landmark-Elemente sind ein einfacher, aber wirkungsvoller Weg, Barrierefreiheit und Usability zu verbessern. Sie machen die Seite nicht nur für Screenreader verständlicher, sondern auch für Suchmaschinen und andere strukturierte Analysen.

 

Verknüpfte WCAG-Kriterien:
WCAG 1.3.1 – Info und Beziehungen
WCAG 2.4.1 – Blöcke überspringen
Zur offiziellen WCAG-Dokumentation →