A: Wiederholende Blöcke müssen vom Nutzer mit Hilfe von der Seite bereitgestellten Mitteln übersprungen werden können (WCAG 2.4.1)
bypass
Stellt sicher, dass jede Seite mindestens ein Mittel bereitstellt, welches dem Nutzer erlaubt direkt zum Inhalt der Seite zu springen.
Das bedeutet
Wiederholende Bereiche wie Kopfzeile, Navigation oder Sidebar stehen vor dem Hauptinhalt. Ohne Sprungmöglichkeit müssen Tastaturnutzende jeden Link erneut fokussieren. Es fehlt ein sichtbarer Skip Link oder eine gleichwertige Lösung, um direkt zum Hauptbereich zu springen.
Auswirkung
Nutzerinnen und Nutzer verlieren Zeit und Orientierung, brechen Vorgänge ab und die Seite verstößt gegen WCAG A. Das betrifft besonders Menschen, die mit Tastatur oder Screenreader navigieren.
Empfehlung
-
Zu Beginn der Seite einen fokussierbaren Skip Link anbieten, der zum Hauptinhalt führt.
-
Den Hauptbereich semantisch kennzeichnen, z. B. mit
<main id="main">. -
Skip Link auf Fokus sichtbar machen; Ziel element mit
tabindex="-1"fokusierbar machen.
Beispiel
Problematisch
<header>… Navigation …</header>
<main>… Inhalt …</main>
Besser
<a class="skip-link" href="#main">Zum Inhalt springen</a>
<header>… Navigation …</header>
<main id="main" tabindex="-1">… Inhalt …</main>
Kurzes CSS
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:0;top:0;padding:.5rem;background:#fff;outline:2px solid}
Verknüpfte WCAG-Kriterien:
WCAG 2.4.1 – Blöcke umgehen