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 geht's?

Auf einer Website muss es möglich sein, sich wiederholende Bereiche zu überspringen.

Ein solcher wiederholender Bereich ist etwa 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

Nutze die für deine Situation passende Technik, um das Erfolgskriterium zu erfüllen.

Sprunglinks
Empfehlung!
Direkt am Seitenanfang sollten Sprunglinks zu wichtigen Bereichen wie dem Hauptinhalt (<main>) vorhanden sein.

Der Link zum Hauptinhalt sollte das erste bedienbare Element sein. Er ist normal versteckt und erst beim Tastaturnavigieren sichtbar. Diese Technik wird stark von uns empfohlen. Die zwei weiteren Techniken werden von manchen Prüfern nur als »accessibility-supported« eingestuft und abgewertet.

Übertreibe es nicht mit den Sprunlinks. Ein Link zum Hauptinhalt ist super, ein zweiter zum Footer okay. Bei allen weiteren, sollte man sich überlegen, ob diese wirklich hilfreich und nötig sind.

Wichtig: Beim Betätigen des Sprunglinks muss auch der Tastaturfokus verschoben werden, sonst landet man beim nächsten [TAB] 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 Landmarks wie die Navigation mehrfach verwendest, solltest du sie zusätzlich benennen (zum Beispiel über ein aria-label oder aria-labelledby). So wird auch für Screenreader-User klar, mit welcher Navigation sie gerade interagieren.
WCAG-Technik(en) in Englisch:
- ARIA11: Nutze ARIA-Landmarken, um Bereiche einer Seite zu identifizieren

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

Überschriften helfen Screenreader-Usern, per Tastaturkürzel zu navigieren und so Bereiche zu überspringen. Ohne Screenreader geht das natürlich nicht so einfach. Das ist ein Grund, warum empfohlen wird, sich nicht allein auf diese Technik zu verlassen.
WCAG-Technik(en) in Englisch:
- H69: Stelle Überschriftenelementen zu Beginn eines jeden Inhaltsabschnitts bereit