Die WCAG-Kriterien

WCAG 2.4.1: Bereiche überspringbar

Zurück zu allen WCAG-Kriterien

ÜBERBLICK

Umsetzbarkeit:

Komplexität:Einfach
Dauer:Schnell

Wichtig für Rolle:

Entwicklung

Zum WCAG-Kriterium:

Bereiche überspringen (englisch)

Worum gehts?

Auf einer Website muss es möglich sein, wiederholende Bereiche (wie Header und Footer) zu überspringen. Nutze dafür am besten versteckte Sprunglinks oder HTML-Landmarks.

Ein solcher wiederholender Bereich ist zum Beispiel der Header. Der Header kommt auf jeder Unterseite der Webseite vor. Personen, die mit der Tastatur oder assistiven Technologien durch die Webseite navigieren, müssen sich jedes Mal erneut mit der Tab-Taste durch den ganzen Header quälen, wenn er nicht überspringbar ist.

Ein Beispiel von einem Sprunglink, der in einem Header angezeigt wird und mir ermöglicht direkt zum Hauptinhalt zu springen.

Umsetzung

Mindestens eine der folgenden Möglichkeiten muss umgesetzt werden, um das Kriterium zu erfüllen. Nähere Informationen dazu findest du in den jeweils verlinkten WCAG-Techniken.

Sprunglinks nutzen
Empfehlung!
Füge am Anfang der Seite einen Link oder eine kleine Liste mit Links ein, mit denen User direkt zu wichtigen Bereichen der Seite springen können – zum Beispiel zum Hauptinhalt oder zu wichtigen Abschnitten.

Der Link zum Hauptinhalt sollte als erstes bedienbares Element auf der Seite erscheinen. Er ist normalerweise versteckt und wird erst sichtbar, wenn man mit der Tastatur navigiert.

Wichtig ist, dass die Sprunglinks auch den Fokus der Tastatur verschieben. Sonst landet man beim nächsten Drücken der Tab-Taste wieder oben auf der Seite!
WCAG-Technik(en) in Englisch:

ARIA-Landmarks
Nutze ARIA-Landmarks, um verschiedene Bereiche der Seite klar zu kennzeichnen. Typische Rollen sind z. B. navigation, main, search, banner, contentinfo oder region.

Wenn du die Rolle der Navigation mehrfach verwendest, solltest du die Navigationen zusätzlich benennen (zum Beispiel über ein aria-label), damit auch für nicht-sehende Usern klar ist, welche Navigation das ist.
WCAG-Technik(en) in Englisch:
- ARIA11: Nutze ARIA-Landmarken, um Bereiche einer Seite zu identifizieren

Richtig gegliederte Überschriftenstruktur
Strukturiere die Seite mit logisch gegliederten Überschriften (h2 gehört unter h1, h3 unter h2 usw.).

Überschriften helfen Screenreader-Usern auf Webseiten per Tastaturkürzel zu navigieren und so Bereiche zu überspringen.
WCAG-Technik(en) in Englisch:
- H69: Stelle Überschriftenelementen zu Beginn eines jeden Inhaltsabschnitts bereit