WCAG 2.1 - 2.4.1
Bypass Blocks
Ein Mechanismus steht zur Verfügung, um Inhalte zu umgehen, die auf mehreren Webseiten wiederholt werden.
Inhalt
Was Bedeutet das Success Criterium 2.4.1 - Bypass Blocks?Warum ist es so wichtig, das Success Criterium 2.4.1 - Bypass Blocks zu beachten?Was hat das Success Criterium 2.4.1 - Bypass Blocks mit dem BFSG zu tun?Lösungen für 2.4.1 - Bypass Blocks anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 2.4.1 - Bypass Blocks?Was Bedeutet das Success Criterium 2.4.1 - Bypass Blocks?
Das Success Criterion 2.4.1 "Bypass Blocks" verlangt, dass Nutzer:innen wiederkehrende inhaltliche Blöcke (wie Navigationselemente, Kopfzeilen, etc.) auf einer Seite überspringen können und so direkt zum Hauptinhalt gelangen. Das können beispielsweise dabei helfen:
- Ein "Skip to main content"-Link am Anfang der Seite, der direkt zur Hauptinhalt springt.
- Eine semantisch sinnvolle Seitenstruktur mittels Überschriften oder Landmarken (z.B. <main>, <nav>, <header>, <footer>) im Code.
Für die meisten Websites ist es am einfachsten, einen überspringbaren Link ganz oben im HTML einzufügen, der beim Fokus (z.B. durch Tab-Taste) sichtbar wird und den Nutzer zum Hauptinhalt bringt.
Warum ist es so wichtig, das Success Criterium 2.4.1 - Bypass Blocks zu beachten?
Viele Menschen mit Sehbehinderungen, die Screenreader oder eine Tastatur-Navigation nutzen, müssen sich sonst jedes Mal durch Navigationselemente, Menüs und andere wiederkehrende Bereiche bewegen, wenn sie zu einer anderen Seite wechseln. Bypassing-Mechanismen wie ein "Skip to main content"-Link oder richtige ARIA-Landmarks sparen enorm viel Zeit und erhöhen die Nutzbarkeit und die Zugänglichkeit.
Was hat das Success Criterium 2.4.1 - Bypass Blocks mit dem BFSG zu tun?
Das BFSG schreibt in Verbindung mit der EN 301 549 die Einhaltung der in den WCAG definierten Anforderungen fest. Ohne die Möglichkeit, Blöcke zu überspringen, ist eine Seite nicht konform, da besonders blinde und sehbehinderte Nutzerinnen damit von einer effizienten und gleichberechtigten Nutzung ausgeschlossen werden. Eine Nichtumsetzung stellt somit einen klaren Verstoß gegen die gesetzlichen Vorgaben dar und ist für BFSG-konforme Websites nicht zulässig.
Lösungen für 2.4.1 - Bypass Blocks anhand von Codebeispielen
Falscher Code
<body>
<nav>
<ul>
<li><a href="#">Start</a></li>
<li><a href="#">Produkte</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<main>
<h1>Herzlich willkommen!</h1>
<p>Dies ist der Hauptinhalt.</p>
</main>
</body>Korrekter Code
<body>
<a class="skip-link" href="#main-content">Zum Hauptinhalt springen</a>
<nav>
<ul>
<li><a href="#">Start</a></li>
<li><a href="#">Produkte</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<main id="main-content">
<h1>Herzlich willkommen!</h1>
<p>Dies ist der Hauptinhalt.</p>
</main>
</body>
<style>
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link:focus {
position: static;
left: auto;
width: auto;
height: auto;
background: #fff;
color: #000;
padding: 8px;
z-index: 1000;
}
</style>Im schlechten Beispiel fehlt die Möglichkeit, den Navigationsblock zu überspringen – Nutzer mit Tastatur oder Screenreader müssen jedes Mal durch die Navigation, bevor sie zum Inhalt gelangen. Im guten Beispiel gibt es einen sichtbaren 'Skip to main content'-Link, der beim Fokus (per Tab-Taste) erscheint und direkt zum Hauptinhalt springt. Das spart Zeit und erhöht die Zugänglichkeit.
Falscher Code
<header>
<!-- Navigation und Logo -->
</header>
<main>
<!-- Hauptinhalt -->
</main>Korrekter Code
<header role="banner">
<!-- Navigation und Logo -->
</header>
<nav aria-label="Hauptnavigation">
<!-- Navigationslinks -->
</nav>
<main id="main-content">
<!-- Hauptinhalt -->
</main>Auch mit ARIA-Landmarks und semantischen HTML-Elementen wie <main>, <nav> und <header> können Screenreader erkennen, wo der Hauptinhalt beginnt. Ein expliziter Skip-Link ist jedoch meist die beste und sicherste Lösung für alle.
Wie löse ich Verstöße gegen das Success Criterium 2.4.1 - Bypass Blocks?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.