---
title: Best practice: HTML5-Landmark-Elemente werden zur Verbesserung der Navigation verwendet  (WCAG 1.3.1 + WCAG 2.4.1)
description: Erfahren Sie, wie HTML5-Landmark-Elemente wie main, nav oder header die Orientierung und Tastaturnavigation verbessern und zur Erfüllung der WCAG-Anforderungen beitragen.
---

[Zu Content springen](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/use-landmarks#main-content)

- [Deutsch](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/use-landmarks)
- [English](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/use-landmarks)

Deutsch

Untermenü für Übersetzungen anzeigen

![SiteCockpit Logo](https://help.sitecockpit.com/hs-fs/hubfs/siteCockpit%20mit%20claim_rgb.png?width=328&height=92&name=siteCockpit%20mit%20claim_rgb.png)

- [Tickets](https://hub.sitecockpit.com/portal)
- [Dokumentation](https://help.sitecockpit.com/de/dokumentation)
- [Abmelden](https://146086235.hs-sites-eu1.com/_hcms/mem/logout)

Hauptnavigation öffnen

Hauptnavigation schließen

- [Tickets](https://hub.sitecockpit.com/portal)
- [Dokumentation](https://help.sitecockpit.com/de/dokumentation)
- [Abmelden](https://146086235.hs-sites-eu1.com/_hcms/mem/logout)
- - [Deutsch](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/use-landmarks)
    - [English](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/use-landmarks)
  
  
  
  
  
  
  Deutsch
  
  Untermenü für Übersetzungen anzeigen
- [Kontakt](mailto:kontakt@sitecockpit.com)

[Kontakt](mailto:kontakt@sitecockpit.com)

 Wie können wir Ihnen helfen?

- Es gibt keine Vorschläge, da das Suchfeld leer ist.

1. [Dokumentation](https://help.sitecockpit.com/de/dokumentation?hsLang=de)
2. [Backend](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de)
3. [easyMonitorung manuelle Prüfpunkte](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easymonitorung-manuelle-pr%C3%BCfpunkte)

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

## use-landmarks

- [**Bedeutung**](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/use-landmarks#Das-bedeutet)
- [**Auswirkung**](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/use-landmarks#Auswirkung)
- [**Empfehlung**](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/use-landmarks#Empfehlung)
- [**Beispiele**](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/use-landmarks#Beispiele)
- [**Hinweis**](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/use-landmarks#Hinweis)

### **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](https://www.w3.org/TR/WCAG22/#info-and-relationships)  
[WCAG 2.4.1 – Blöcke überspringen](https://www.w3.org/TR/WCAG22/#bypass-blocks)<https://www.w3.org/TR/WCAG22/#info-and-relationships>

- [Allgemeines](https://help.sitecockpit.com/de/dokumentation/allgemeines?hsLang=de#main-content)
  
  
  
  
  
    - [Informationen](https://help.sitecockpit.com/de/dokumentation/allgemeines?hsLang=de#informationen)
    - [Dashboard](https://help.sitecockpit.com/de/dokumentation/allgemeines?hsLang=de#dashboard)
- [Backend](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#main-content)
  
  
  
  
  
    - [easyVision](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easyvision)
    - [easyMonitoring](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easymonitoring)
    - [easyMonitorung manuelle Prüfpunkte](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easymonitorung-manuelle-pr%C3%BCfpunkte)
    - [easyMonitorung automatische Prüfpunkte](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easymonitorung-automatische-pr%C3%BCfpunkte)
    - [easyAI](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easyai)
    - [easyStatement](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easystatement)
    - [Contrast Checker](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#contrast-checker)
    - [easyLanguage](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easylanguage)
- [Integration easyVision](https://help.sitecockpit.com/de/dokumentation/integration-easyvision?hsLang=de#main-content)
  
  
  
  
  
    - [Einrichtung](https://help.sitecockpit.com/de/dokumentation/integration-easyvision?hsLang=de#einrichtung)
    - [Installation](https://help.sitecockpit.com/de/dokumentation/integration-easyvision?hsLang=de#installation)
    - [Browser Erweiterungen](https://help.sitecockpit.com/de/dokumentation/integration-easyvision?hsLang=de#browser-erweiterungen)
- [Servicepartner](https://help.sitecockpit.com/de/dokumentation/servicepartner?hsLang=de#main-content)
  
  
  
  
  
    - [Allgemeine Informationen](https://help.sitecockpit.com/de/dokumentation/servicepartner?hsLang=de#allgemeine-informationen)
    - [Stripe](https://help.sitecockpit.com/de/dokumentation/servicepartner?hsLang=de#stripe)
- [Support](https://help.sitecockpit.com/de/dokumentation/support?hsLang=de#main-content)
  
  
  
  
  
    - [FAQ](https://help.sitecockpit.com/de/dokumentation/support?hsLang=de#faq)
    - [Ticketsystem](https://help.sitecockpit.com/de/dokumentation/support?hsLang=de#ticketsystem)

[![siteCockpit rgb](https://help.sitecockpit.com/hs-fs/hubfs/siteCockpit%20rgb.png?width=200&height=42&name=siteCockpit%20rgb.png "siteCockpit rgb")](https://www.sitecockpit.com/)

Telefon: +49(0)30 403 64 98 98  
E-Mail: kontakt@sitecockpit.com

<https://www.facebook.com/sitecockpit/> <https://de.linkedin.com/company/sitecockpit> <https://www.instagram.com/sitecockpit/> <https://www.youtube.com/@SiteCockpit> [mailto:kontakt@sitecockpit.com](mailto:kontakt@sitecockpit.com)

Copyright © 2025, Site Cockpit GmbH