WCAG 2.4.1 Blöcke umgehen

Das Erfolgskriterium 2.4.1 erspart Tastatur- und Screenreader-Nutzern, auf jeder Seite denselben Header, dasselbe Menü und dieselbe Werbeleiste zu durchlaufen, bevor sie den Inhalt erreichen. In einem Shop mit großem Mega-Menü können das Dutzende Tab-Drücke pro Seite sein. Es gehört zur Konformitätsstufe A und ist Teil von EN 301 549 (Abschnitt 9.2.4.1). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Es ist ein Mechanismus verfügbar, um Inhaltsblöcke zu umgehen, die auf mehreren Webseiten wiederholt werden.

Die WCAG schreiben keine bestimmte Technik vor. Zu den hinreichenden Techniken, die das W3C nennt, gehören:

• ein Link oben auf der Seite, der zum Hauptinhalt springt („Zum Hauptinhalt springen“);
• ein Link am Anfang eines wiederholten Blocks, der zu dessen Ende springt;
• ARIA-Landmarks (<header>, <nav>, <main>, <footer> oder die entsprechenden Rollen), die Seitenbereiche kennzeichnen;
• Überschriften am Anfang jedes Inhaltsabschnitts;
• auf- und zuklappbare Menüs.

In der Praxis deckt ein Sprunglink plus ein korrektes <main>-Landmark sowohl reine Tastaturnutzer (die ohne zusätzliche Tools nicht per Landmark springen können) als auch Screenreader-Nutzer ab.

Typische Fehler in Onlineshops

• kein Sprunglink und ein Header mit Suche, Konto, Wunschzettel, Warenkorb, Währungsumschalter und einem Mega-Menü mit 40 Links vor dem Inhalt;
• ein Sprunglink, der auf einen nicht existierenden Anker zeigt oder auf ein Element, das keinen Fokus erhalten kann;
• ein Sprunglink, der auch bei Fokus unsichtbar bleibt;
• kein <main>-Landmark oder die ganze Seite nur aus <div>-Elementen;
• eine lange Filter-Seitenleiste auf Kategorieseiten, ohne Möglichkeit, zu den Produkten zu springen.

So prüfen Sie es

Automatisch: Unser Checker prüft, ob die Seite mindestens einen Mechanismus zum Überspringen bietet — einen Sprunglink, ein Landmark oder eine Überschrift (bypass-Regel). Ob der Link bei Fokus sichtbar ist oder an der richtigen Stelle landet, kann er nicht beurteilen.

Manuell: Laden Sie eine Seite und drücken Sie einmal Tab. Ein Link „Zum Inhalt springen“ sollte erscheinen. Drücken Sie Enter und dann erneut Tab: Der Fokus sollte am Anfang des Hauptinhalts landen, nicht wieder im Menü. Lassen Sie sich mit einem Screenreader die Landmarks auflisten und prüfen Sie, dass es genau einen main-Bereich gibt.

So beheben Sie es

• Fügen Sie im Theme-Layout einen Sprunglink als erstes fokussierbares Element ein, der auf <main id="main-content"> zeigt.
• Stellen Sie sicher, dass das Ziel den Fokus erhalten kann (bei Bedarf tabindex="-1" ergänzen), damit der Fokus wirklich wandert.
• Zeigen Sie den Sprunglink bei Fokus mit gutem Kontrast an.
• Verwenden Sie semantische Landmarks: <header>, <nav>, <main>, <footer>.
• Beginnen Sie jeden Inhaltsabschnitt mit einer echten Überschrift.

Verwandte Kriterien

• 2.4.3 Fokus-Reihenfolge — der Sprunglink sollte in der Fokus-Reihenfolge an erster Stelle stehen.
• 2.4.6 Überschriften und Beschriftungen (Labels) — Überschriften müssen den Abschnitt beschreiben.
• 2.4.7 Fokus sichtbar — der Sprunglink muss bei Fokus sichtbar sein.

Häufige Fragen

Verlangt WCAG 2.4.1 einen Sprunglink?

Nicht zwingend. Die WCAG verlangen einen Mechanismus, um wiederholte Blöcke zu umgehen. Ein Link „Zum Hauptinhalt springen“ ist der häufigste; ARIA-Landmarks wie main und nav sowie Überschriften am Anfang von Abschnitten sind ebenfalls hinreichende Techniken.

Darf der Sprunglink versteckt sein?

Er darf visuell verborgen sein, bis er den Tastaturfokus erhält; dann muss er sichtbar werden. Ein Link, der auch bei Fokus unsichtbar bleibt, verwirrt sehende Tastaturnutzer.

Welche Blöcke müssen in einem Shop übersprungen werden können?

Inhalte, die sich auf vielen Seiten wiederholen: Header, Hinweisleiste, Hauptnavigation und Mega-Menü, manchmal auch lange Filter-Seitenleisten vor der Produktliste.