WCAG & BFSG: WCAG-Referenz: Bedienbar
WCAG 2.4.1: Blöcke umgehen
WCAG 2.4.1 verlangt einen Mechanismus, mit dem sich Inhaltsblöcke überspringen lassen, die auf mehreren Seiten wiederkehren (allen voran Kopfbereich und Hauptnavigation). In der Praxis erfüllt man das Kriterium mit einem Sprunglink zum Hauptinhalt, mit sauber gesetzten Landmarks oder, am besten, mit beidem.
(Englisch: Bypass Blocks.)
| Stufe | Prinzip | Teil der WCAG seit | Rechtlich verbindlich? |
|---|---|---|---|
| A | Bedienbar | 2.0 (2008) | Ja (über EN 301 549 in BFSG & BITV) |
Das Wichtigste in Kürze
- Ein Mechanismus reicht: Die Norm schreibt weder den Sprunglink noch eine bestimmte Technik vor. Sie verlangt nur, dass es irgendeinen Weg vorbei am wiederkehrenden Block gibt.
- Für sehende Tastaturnutzer ist der Sprunglink der einzige Mechanismus. Landmarks und Überschriften helfen ihnen nicht, weil ihr Browser keine Regionen-Navigation anbietet.
- Der Sprunglink muss das erste fokussierbare Element sein und beim Fokus sichtbar werden.
display: noneodervisibility: hiddennehmen ihn auch der Tastatur weg. -
Das Sprungziel braucht in der Praxis
tabindex="-1", sonst bleibt der Fokus in manchen Browsern am Sprunglink hängen, obwohl die Seite scrollt. - Betroffen ist nicht nur die Navigation: Cookie-Banner, Filterleisten, Werbeblöcke und Mega-Menüs sind ebenfalls „Blöcke“ im Sinne des Kriteriums.
- Stufe A: Das ist die unterste Konformitätsstufe und damit über die EN 301 549 in Deutschland verbindlich; im BIK-BITV-Test heißt der zugehörige Prüfschritt „2.4.1 Bereiche überspringbar“.
- Eine Zahlengrenze gibt es nicht. Die Norm nennt keine erlaubte Höchstzahl an Tabulator-Schritten. Bewertet wird, ob ein Sprungmechanismus existiert.
Brauche ich einen Skip-Link?
Du brauchst irgendeinen Mechanismus, um wiederkehrende Blöcke zu überspringen. In der Praxis ist das der Skip-Link, alternativ genügen Landmarks.
Der Normtext ist kurz: Es muss einen Mechanismus geben, um Inhaltsblöcke zu überspringen, die auf mehreren Webseiten wiederholt werden. Alles Weitere steckt in der Frage, was als Mechanismus zählt. Anerkannt sind drei Wege, die sich gut ergänzen:
- Sprunglink (Skip-Link): „Zum Inhalt springen“ als erstes fokussierbares Element im
<body>, das per Fragment direkt zu<main>führt. Das Muster steht komplett unter Skip-Links. - Landmarks:
<header>,<nav>,<main>,<footer>und<aside>. Screenreader springen damit direkt zwischen den Regionen (bei NVDA über die TasteD, bei VoiceOver über den Rotor). -
Überschriften-Gliederung: Eine saubere
Überschriften-Struktur von h1 bis h6
ist ebenfalls ein Sprungnetz; mit
Hbeziehungsweise1landet man in einem Anschlag im Hauptinhalt.
Wichtig ist die Zielgruppenfrage dahinter: Landmarks und Überschriften bedienen ausschließlich assistive Technik. Wer sehend ist und die Maus nicht benutzen kann (nach einer Handverletzung, mit Tremor, mit Switch-Steuerung), hat weder Rotor noch Regionen-Taste. Für diese Gruppe existiert genau ein Mechanismus, und das ist der sichtbare Sprunglink. Für mich ist die Kombination aus beidem der Kern des Kriteriums, nicht nur ein Extra.
Der vollständige Wortlaut und die anerkannten Techniken stehen im Understanding-Dokument des W3C zu 2.4.1; das deutsche Prüfvorgehen beschreibt der Prüfschritt „2.4.1 Bereiche überspringbar“ des BIK-BITV-Tests.
Wen betrifft es besonders?
Tastaturnutzer zahlen den Preis bei jedem Seitenwechsel neu. Eine Hauptnavigation mit vierzig Links bedeutet vierzig Tastendrücke, bevor der erste Satz des Artikels erreichbar ist (multipliziert mit jeder Unterseite, die im Laufe einer Sitzung aufgerufen wird). Bei Switch-Bedienung kommt erschwerend hinzu, dass jeder Schritt über ein Scanning-Intervall läuft: Aus vierzig Tastendrücken werden schnell zwei Minuten Warten.
Screenreader-Nutzer hätten ohne Sprungmechanismus keine Wahl, als jede Seite linear anzuhören. Sie sind meist gut versorgt, sobald die Landmarks stimmen. Das gilt aber eben nur dann. Eine Seite aus lauter <div>-Containern (Div-Suppe) bietet keine Regionen, zwischen denen sich springen ließe.
Und schließlich Menschen mit Bildschirmvergrößerung: Bei 400 % Zoom füllt eine Hauptnavigation gern mal zwei Bildschirmhöhen. Ein Sprunglink erspart das Scrollen durch immer dieselbe Menüwand.
Richtig & falsch im Code
<!-- Richtig: Sprunglink als erstes Element im body, Ziel mit tabindex -->
<body>
<a class="skip-link" href="#main">Zum Inhalt springen</a>
<header>…</header>
<nav aria-label="Hauptnavigation">…</nav>
<main id="main" tabindex="-1">
<h1>Seitentitel</h1>
…
</main>
</body>Das tabindex="-1" am Ziel sieht überflüssig aus, ist es aber nicht: Ohne diesen Wert verschiebt ein Teil der Browser zwar die Bildlaufposition, lässt den Tastaturfokus jedoch am Sprunglink stehen. Der nächste Tabulator-Druck landet dann wieder im Menü. Der Sprung war optisch erfolgreich und faktisch wirkungslos.
/* Richtig: unsichtbar, bis er Fokus bekommt. Niemals mit display:none. */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
}
.skip-link:focus {
left: 1rem;
top: 1rem;
padding: 0.75rem 1rem;
background: #fff;
outline: 3px solid #0b3d91;
}<!-- Falsch: mit display:none versteckt. Für die Tastatur existiert er nicht. -->
<a class="skip-link" style="display: none" href="#main">Zum Inhalt springen</a>
<!-- Falsch: Ziel existiert nicht mehr (Relaunch hat das Markup geändert) -->
<a href="#content">Zum Inhalt springen</a>
<main id="main">…</main>Der zweite Fall ist heimtückischer als der erste, weil nichts sichtbar kaputt ist. Der Link erscheint, lässt sich betätigen und der Fokus bleibt, wo er war.
Für die Landmark-Hälfte gilt: genau ein <main> pro Seite, jede <nav> mit eigenem aria-label, wenn es mehr als eine gibt. Die Regeln dazu stehen unter Struktur-Elemente.
So testest du es
- Seite frisch laden und einmal Tabulator drücken. Erscheint sichtbar ein Link wie „Zum Inhalt springen“? Wenn nichts auftaucht, ist der Mechanismus für sehende Tastaturnutzer schon durchgefallen.
- Enter drücken und weitertabben. Landet der nächste Fokus im Hauptinhalt oder springt er zurück in die Navigation? Das ist der
tabindex="-1"-Test. - Landmarks prüfen, etwa mit axe DevTools oder der Landmark-Übersicht des Screenreaders: genau ein
<main>, Navigation als<nav>, Kopf- und Fußbereich ausgezeichnet. -
Mit NVDA die Taste
Ddrücken und durch die Regionen springen: Kommt man in einem Schritt am Menü vorbei? - Die Sonderfälle durchgehen: Cookie-Banner offen, mobile Ansicht mit ausgeklapptem Menü, Suchergebnisseite mit Filterspalte. Überall dort liegt ein wiederkehrender Block, den jemand überspringen können muss.
Ob der erste fokussierbare Link ein Sprunglink ist und ob sein Ziel existiert, prüft der Struktur-Check automatisch mit.
Häufiger Fehler in der Praxis
Der Klassiker in Audits ist nicht der fehlende Sprunglink, sondern der kaputte. Er stammt aus dem alten Theme, zeigt auf #content, und der Relaunch hat den Container in #main umbenannt. Niemandem fällt das auf, weil den Link im Tagesgeschäft niemand benutzt. Das ändert sich erst, wenn jemand mit der Tastatur ankommt. Ich würd dir raten, das Sprungziel in den automatisierten Test aufzunehmen: ein Zweizeiler, der prüft, ob es zu jedem href="#…" im Kopfbereich ein Element mit dieser ID gibt.
Der zweite Fall ist der verdeckte Sprunglink. Er wird beim Fokus sichtbar, liegt aber unter einem position: fixed-Kopfbereich oder hinter dem Cookie-Banner mit z-index: 9999. Formal erfüllt, praktisch unsichtbar und seit WCAG 2.2 zusätzlich ein Verstoß gegen 2.4.11 Fokus nicht verdeckt.
Der dritte betrifft Single-Page-Anwendungen: Nach einem Routenwechsel wird zwar neuer Inhalt gerendert, der Fokus bleibt aber am geklickten Link im Menü hängen. Der Sprunglink aus dem ursprünglichen Seitenaufruf hilft dann nicht mehr, weil er längst hinter dem Nutzer liegt. Hier muss der Router den Fokus selbst auf die neue Überschrift setzen. Das ist dieselbe Mechanik wie beim Fokus-Management in Dialogen.
Häufige Fragen
Reichen Landmarks allein, um 2.4.1 zu erfüllen?
Formal ja: Landmarks sind ein anerkannter Mechanismus, und der BIK-BITV-Test akzeptiert sie. Praktisch nein, denn sie helfen nur Menschen mit assistiver Technik. Sehende Tastaturnutzer haben keine Regionen-Navigation im Browser und tabben weiter durch die komplette Menüleiste. Wer nur Landmarks setzt, besteht die Prüfung und lässt eine große Nutzergruppe stehen.
Muss der Sprunglink dauerhaft sichtbar sein?
Nein. Er darf ausgeblendet sein, solange er beim Fokus sichtbar wird und nicht mit display: none oder visibility: hidden aus der Tabulator-Reihenfolge fällt. Der verbreitete Weg ist die Positionierung außerhalb des sichtbaren Bereichs, die im :focus-Zustand zurückgenommen wird. Dauerhaft sichtbare Sprunglinks sind erlaubt und in Behördenauftritten üblich.
Wie viele Links dürfen vor dem Hauptinhalt liegen?
Die Norm nennt keine Zahl. 2.4.1 fragt nicht „Wie lang ist der Weg?“, sondern „Gibt es eine Abkürzung?“. Auch bei fünf Menüpunkten ist das Kriterium erfüllt oder nicht erfüllt. Ein „halb“ gibt es nicht. Praktisch gilt: Ab etwa zehn fokussierbaren Elementen vor dem Inhalt merkt man den Unterschied im Test sofort.
Braucht jede Seite einen eigenen Sprunglink?
Ja, denn das Kriterium wird pro Seite bewertet, und der wiederkehrende Block erscheint auf jeder Seite neu. In der Praxis ist das kein Aufwand: Der Sprunglink steht im Layout-Template und wird damit einmal gepflegt. Bei Single-Page-Anwendungen kommt der Fokuswechsel beim Routenwechsel dazu.
Was ist der Unterschied zu 2.4.5 „Verschiedene Methoden“?
2.4.1 regelt das Überspringen innerhalb einer Seite, 2.4.5 verlangt mehrere Wege, eine Seite zu finden (etwa Navigation plus Suche plus Sitemap). Beide Kriterien liegen im selben Themenfeld „Navigierbar“, greifen aber an unterschiedlichen Punkten. Mehr dazu unter 2.4.5 Verschiedene Methoden.
Verwandte Themen
- Skip-Links: das Muster mit allen Varianten
- Landmarks & Dokument-Outline: die strukturelle Hälfte
- 2.4.3 Fokus-Reihenfolge: wohin der Fokus nach dem Sprung gehört
- 2.4.7 Fokus sichtbar: der Sprunglink muss zu sehen sein
- Tastatur & Fokus: der Praxis-Leitfaden zum Thema