---
title: "Blöcke umgehen"
url: "https://barrierefreihochzwei.de/de/wcag/2-4-1-bloecke-umgehen"
language: "de"
description: "WCAG 2.4.1 verlangt einen Weg, wiederkehrende Blöcke wie die Navigation zu überspringen. So setzt du Sprunglinks, Landmarks und Überschriften richtig ein."
published: "2025-01-01T08:00:00+01:00"
updated: "2026-10-15T09:42:00+02:00"
---

# Blöcke umgehen

Wenn Navigation zur Odyssee wird.

- **Erfolgskriterium:** 2.4.1
- **Prinzip:** Bedienbar
- **Konformitätsstufe:** Level A
- **Erklärung beim W3C:** [www.w3.org/WAI/WCAG22/Understanding/bypa...](https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html)

Erfolgskriterium 2.4.1

# 2.4.1 Blöcke umgehen

Level ABedienbar

Wenn Navigation zur Odyssee wird.

## 1. Was ist das Ziel dieses Kriteriums?

Stell dir vor, du hörst jeden Morgen dieselbe Radiowerbung, bevor dein Lieblingspodcast startet – nervig, oder? Genauso geht es Menschen, die mit assistiven Technologien oder nur mit der Tastatur durchs Internet navigieren. Sie müssen sich auf jeder Seite durch die immer gleichen Navigationsmenüs, Banner und Kopfbereiche kämpfen, bevor sie zum eigentlichen Inhalt gelangen.

Das Ziel von Erfolgskriterium 2.4.1 ist daher klar: Nutzer:innen brauchen eine Möglichkeit, sich wiederholende Inhaltsblöcke zu überspringen und direkt zum Hauptinhalt zu gelangen. Was für sehende Menschen mit Maus ein schneller Blick zur Seitenmitte ist, muss auch für alle anderen möglich sein.

## 2. Was fordert das Erfolgskriterium genau?

Es geht um Inhaltsblöcke, die auf mehreren Seiten einer Website wiederholt werden. Das können sein:

**Typische wiederkehrende Blöcke:**

- Navigationsmenüs und Brotkrumennavigation
- Kopfbereiche mit Logo und Suchfunktion
- Werbebanner und Seitenleisten
- Fußbereiche mit Links und Impressum

**Was das Kriterium fordert:** Es muss einen Mechanismus geben, um diese wiederholten Blöcke zu umgehen. Das geht zum Beispiel über:

- einen Sprunglink „Zum Inhalt springen“ am Seitenanfang,
- Links, die einzelne Blöcke überspringen,
- Landmarks (Seitenbereiche wie `<main>` und `<nav>`) und Überschriften, über die assistive Technologien springen können,
- ein- und ausklappbare Navigationsbereiche.

**Nicht gemeint** sind kleine wiederkehrende Elemente wie einzelne Wörter, Formulierungen oder einzelne Links – sie gelten nicht als „Blöcke“.

## 3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du musst auf jeder Seite erst durch 40 Links navigieren, bevor du zum eigentlichen Artikel kommst – oder 200 Wörter anhören, bevor der Inhalt startet. Genau das passiert Screenreader-Nutzenden und Menschen, die nur mit der Tastatur navigieren.

Mechanismen zum Überspringen schaffen Barrierefreiheit, weil sie:

- Screenreader-Nutzenden helfen, schnell zum Hauptinhalt zu gelangen,
- Tastaturnutzenden ersparen, sich auf jeder Seite durch dieselben Links zu tabben,
- Menschen mit motorischen Einschränkungen weniger Eingaben abverlangen – etwa beim Bedienen mit Schaltern oder Mundstab,
- Menschen mit Sehbehinderungen, die stark vergrößern, den Weg zum Inhalt abkürzen,
- die Effizienz für alle verbessern.

Und nicht zuletzt: Sie sorgen für eine klarere Seitenstruktur, von der alle profitieren.

## 4. So setzt du das Kriterium erfolgreich um

Die gute Nachricht: Mechanismen zum Überspringen sind technisch einfach und bringen sofort spürbare Verbesserungen. Hier ein paar bewährte Strategien:

**Sprunglinks einsetzen:**

- Platziere einen Link „Zum Hauptinhalt springen“ als erstes fokussierbares Element jeder Seite.
- Verwende aussagekräftige Linktexte wie „Zum Hauptinhalt“ oder „Navigation überspringen“.
- Der Sprunglink darf visuell versteckt sein, muss aber sichtbar werden, sobald er den Tastaturfokus erhält.
- Verlinke auf einen eindeutigen Anker am Anfang des Hauptinhalts.

**Semantisches HTML nutzen:**

- Verwende HTML-Landmarks wie `<header>`, `<nav>`, `<main>`, `<aside>` und `<footer>`.
- Zusätzliche ARIA-Rollen wie `role="main"` sind bei diesen Elementen überflüssig – die Rolle ist bereits eingebaut.
- Gib mehrfach vorhandenen Landmarks einen Namen, z. B. `aria-label="Hauptnavigation"`.
- Setze aussagekräftige Überschriften am Anfang jedes Inhaltsbereichs (siehe [Überschriften und Beschriftungen](https://barrierefreihochzwei.de/de/wcag/2-4-6-ueberschriften-und-beschriftungen) und [Info und Beziehungen](https://barrierefreihochzwei.de/de/wcag/1-3-1-info-und-beziehungen)).

Wichtig: Landmarks und Überschriften helfen vor allem Screenreader-Nutzenden. Wer nur mit der Tastatur navigiert, kann ohne Zusatzsoftware nicht direkt dorthin springen. Ein Sprunglink ist deshalb die robusteste Lösung.

**Technische Umsetzung:**

```
<a href="#main" class="skip-link">Zum Hauptinhalt springen</a>
<header>…</header>
<nav aria-label="Hauptnavigation">
  <!-- Navigationslinks -->
</nav>
<main id="main" tabindex="-1">
  <!-- Hauptinhalt -->
</main>
```

Das `tabindex="-1"` sorgt dafür, dass der Fokus zuverlässig auf den Hauptinhalt wechselt, ohne dass der Bereich in die normale Tab-Reihenfolge aufgenommen wird.

**Ein- und ausklappbare Bereiche:**

- Biete die Möglichkeit, umfangreiche Navigationsblöcke einzuklappen.
- Nutze dafür eine Schaltfläche mit `aria-expanded` (Aufklapp-Muster).
- Stelle sicher, dass alles per Tastatur bedienbar ist.

## 5. Warum dieses Erfolgskriterium für Unternehmen relevant ist

Auch bei Erfolgskriterium 2.4.1 gilt: Barrierefreiheit ist kein Selbstzweck – sondern bringt handfeste Vorteile.

### 1. Zielgruppe erweitern

Effiziente Navigation kommt allen zugute – nicht nur Menschen mit Behinderungen. Auch wer mit der Tastatur arbeitet, weil es schneller geht, profitiert von Sprunglinks und klarer Struktur.

### 2. Saubere Struktur zahlt sich mehrfach aus

Barrierefreiheit ist kein direkter Rankingfaktor bei Google. Semantisches HTML mit klaren Landmarks und einer logischen Überschriftenstruktur macht deine Inhalte aber für Maschinen leichter verständlich – ein indirekter Vorteil, der auch der Suchmaschinenoptimierung hilft.

### 3. Benutzerfreundlichkeit steigern

Klare Navigationsstrukturen helfen allen, schneller zu finden, was sie suchen. Das erhöht die Zufriedenheit und senkt die Hürde, ein Angebot tatsächlich zu nutzen.

Und nicht zuletzt: 2.4.1 ist ein Level-A-Kriterium und damit Teil von WCAG 2.1 AA, auf die die Norm EN 301 549 verweist. Seit dem 28. Juni 2025 müssen unter anderem Online-Shops nach dem Barrierefreiheitsstärkungsgesetz (BFSG) diese Anforderungen erfüllen, öffentliche Stellen nach BITV 2.0 bzw. Landesrecht. Das ist eine allgemeine Information und keine Rechtsberatung.

## 6. Das Erfolgskriterium im Wortlaut des W3C

> **Success Criterion 2.4.1 Bypass Blocks (Level A)**
> 
> A mechanism is available to bypass blocks of content that are repeated on multiple web pages.

Kurz gesagt: Es muss eine Möglichkeit geben, Inhaltsblöcke zu überspringen, die sich auf mehreren Seiten wiederholen.

**Offizielle Erklärung beim W3C**

Das W3C erklärt jedes Erfolgskriterium ausführlich – mit Absicht, Beispielen und Techniken (auf Englisch).

[Understanding 2.4.1](https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html)

## Weitere Kriterien aus „Bedienbar“

 [  2.1.1 Level A ### Tastatur

Wenn jeder Klick auch ein Tastendruck sein kann.

 ](https://barrierefreihochzwei.de/de/wcag/2-1-1-tastatur) [  2.1.2 Level A ### Keine Tastaturfalle

Wenn der Ausgang fehlt.

 ](https://barrierefreihochzwei.de/de/wcag/2-1-2-keine-tastaturfalle) [  2.1.3 Level AAA ### Tastatur (keine Ausnahme)

Wenn wirklich alles per Tastatur gehen muss.

 ](https://barrierefreihochzwei.de/de/wcag/2-1-3-tastatur-keine-ausnahme)