WCAG & BFSG · WCAG-Referenz: Bedienbar
WCAG 2.4.1: Blöcke umgehen
Es muss einen Mechanismus geben, um Inhaltsblöcke zu überspringen, die auf mehreren Seiten wiederkehren – allen voran Header und Hauptnavigation. Sonst beginnt jede Seite mit derselben Pflichtrunde durch dieselben 40 Links. (Englisch: Bypass Blocks.)
| Stufe | Prinzip | Teil der WCAG seit | Rechtlich verbindlich? |
|---|---|---|---|
| A | Bedienbar | 2.0 (2008) | Ja – über EN 301 549 in BFSG & BITV |
Was verlangt das Kriterium?
Anerkannte Mechanismen – am besten kombiniert:
- Skip-Link: „Zum Inhalt springen“ als erstes fokussierbares Element, das direkt zu
<main>führt – das klassische Muster, komplett beschrieben unter Skip-Links. - Landmarks:
<header>,<nav>,<main>,<footer>– Screenreader springen direkt zwischen den Regionen. - Überschriften-Struktur: eine saubere h1–h6-Gliederung als Sprungnetz.
Der Skip-Link bleibt wichtig, weil er auch sehenden Tastaturnutzern hilft – die haben weder Landmark- noch Überschriften-Navigation.
Wen betrifft es besonders?
Tastatur- und Switch-Nutzer (jeder gesparte Tab-Druck zählt – beim Switch-Scanning zählt er zehnfach) und Screenreader-Nutzer, die ohne Sprungmechanismen jede Seite linear durchhören müssten.
Richtig & falsch im Code
<!-- Richtig: Skip-Link als erstes Element im body -->
<body>
<a class="skip-link" href="#main">Zum Inhalt springen</a>
<header>…</header>
<nav aria-label="Hauptnavigation">…</nav>
<main id="main">
<h1>Seitentitel</h1>
…
</main>
</body>/* Richtig: unsichtbar, bis er Fokus bekommt – nie display:none */
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 1rem;
top: 1rem;
}Häufigster Fehler: ein Skip-Link, der per display: none versteckt ist – damit ist er auch für die Tastatur weg. Zweithäufigster: das Sprungziel #main fehlt oder der Fokus landet ins Leere.
So testest du es
- Seite laden, einmal Tab drücken: Erscheint ein „Zum Inhalt springen“-Link? Enter – landet der Fokus im Hauptinhalt?
- Landmarks prüfen (axe oder Screenreader-Übersicht): genau ein
<main>, Navigation als<nav>? - Mit NVDA per
Ddurch die Regionen springen – kommt man mit einem Schritt am Menü vorbei?
Verwandte Themen
- Skip-Links – das Muster im Detail
- Landmarks & Dokument-Outline – die strukturelle Hälfte
- Struktur-Elemente – header, nav, main, footer richtig einsetzen