2.4.1 Blöcke umgehen

Was bedeutet das?

Kopfzeile, Menü und Suchleiste stehen auf fast jeder Seite gleich. Wer per Tastatur arbeitet, müsste sich sonst auf jeder Seite durch Dutzende Links tabben, bevor der eigentliche Inhalt beginnt. Es braucht daher einen Weg, direkt zum Inhalt zu springen.

Üblich ist ein Sprunglink „Zum Inhalt“ als erstes Element der Seite. Zusätzlich helfen Seitenbereiche (header, nav, main, footer) und eine saubere Überschriftenstruktur, denn Screenreader können direkt dorthin springen.

Wem hilft das?

• Tastaturnutzer, die sonst jedes Mal alle Menüpunkte durchlaufen
• Screenreader-Nutzer, die gezielt zum Hauptinhalt springen wollen
• Menschen mit Schalter- oder Sprachsteuerung, für die jeder Schritt Aufwand ist

Typische Fehler

• Kein Sprunglink und kein main-Element auf der Seite
• Ein Sprunglink, dessen Ziel nicht existiert oder der beim Fokus unsichtbar bleibt
• Der Sprunglink steht erst nach der Navigation und bringt daher nichts

So prüfen wir das

• axe-core Automatisch: axe-core findet typische Verstöße. Ein Verstoß wird als „nicht erfüllt“ vorausgefüllt.
• Belege Belege: Unser Scanner sammelt Material, zum Beispiel Screenshots, Listen und Messungen.

Prüffrage: Gibt es einen Skip-Link oder Landmarks/Überschriften, um wiederholte Navigation zu überspringen?

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

<body>
  <div class="nav">…</div>
  <div class="content">…</div>
</body>

<body>
  <a class="sprunglink" href="#inhalt">Zum Inhalt</a>
  <header>…</header>
  <nav aria-label="Hauptmenü">…</nav>
  <main id="inhalt" tabindex="-1">…</main>
</body>

Der Sprunglink führt direkt zum Hauptinhalt, und die Seitenbereiche lassen sich mit dem Screenreader gezielt ansteuern.

Praxistipps

• Der Sprunglink darf optisch verborgen sein, muss aber erscheinen, sobald er den Tastaturfokus erhält.

Ratgeber und Muster dazu

• Ohne Maus ans Ziel: Tastatur und FokusViele Menschen bedienen das Web ohne Maus: mit Tastatur, Schaltern, Sprachsteuerung oder Screenreader. Hier lesen Sie, was dafür funktionieren muss und wie Sie den Fokus in modernen Web-Apps richtig führen.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 2.4.1 Bypass Blocks