2.4.1 Bypass-Blöcke

WCAG-Definition

Eine Möglichkeit bereitstellen, um wiederkehrende Inhalte (z. B. Navigationsmenüs, Kopf- und Seitenbereiche) zu überspringen.

Bedeutung

  • Screenreader- und Tastaturnutzer müssen nicht bei jedem Seitenaufruf dutzende Links im Menü durchspringen, um zum Hauptinhalt zu gelangen.

  • Verbessert die Effizienz und Nutzerfreundlichkeit für alle.

Ausreichende Techniken

Skip-Link („Inhalt überspringen“)

HTML:

<a href="#maincontent" class="skip-link">Zum Inhalt springen</a>

<header>…Navigation…</header>

<main id="maincontent" tabindex="-1">
  <h1>Seitentitel</h1>
  <p>Hauptinhalt…</p>
</main>

CSS:

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: .5rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  top: 0; /* sichtbar, wenn fokussiert */
}

Landmark Roles / HTML5-Struktur

Mit ARIA Landmark Roles oder HTML5-Elementen (<main>, <nav>, <header>) können Screenreader Nutzer direkt zum Bereich springen.

HTML:

<header role="banner">…</header>
<nav role="navigation">…</nav>
<main role="main">…</main>
<footer role="contentinfo">…</footer>

Die meisten Screenreader haben Befehle wie „Springe zum nächsten main“.

Mehrere Navigationswege bereitstellen

Z. B. eine Sitemap, interne Sprunglinks oder eine Suchfunktion.

Beratungstechnicken

  • Skip-Link sichtbar lassen – nicht nur auf Fokus. Das hilft auch sehenden Tastaturnutzern.

  • Mehrere Skip-Links anbieten: „Zur Hauptnavigation springen“, „Zum Footer springen“.

  • Überschriftenhierarchie klar strukturieren → so können Screenreader-Nutzer auch per H-Navigation (H-Taste) springen.

  • ARIA-Attribute nutzen (aria-label="Hauptnavigation") → macht Landmarken verständlicher.

Fehler

  • Skip-Link ist da, aber führt ins Leere (ID fehlt oder doppelt).
  • Skip-Link wird nie sichtbar (z. B. display:none statt clip/position).
  • Nur ARIA-Roles gesetzt, aber keine echte Sprungmöglichkeit per Skip-Link → Screenreader profitieren, Tastaturnutzer ohne Screenreader nicht.
  • Skip-Link springt zum falschen Bereich (z. B. Menü statt Inhalt).
  • Skip-Link nicht per Tastatur erreichbar, weil JavaScript-Fokusfalle.