Wiederholte Blöcke überspringen

Was das Kriterium verlangt

Wenn derselbe Inhaltsblock auf mehreren Seiten erscheint — Kopfzeile, Hauptnavigation, Mega-Menü, Breadcrumb-Leiste, Hilfslinks — überqueren Maus-Nutzende ihn per Klick sofort. Tastatur-Nutzende müssen ihn hingegen jedes Mal vollständig durchtabben. Screenreader-Nutzende müssen ihn jedes Mal anhören. Das Erfolgskriterium fordert mindestens einen Mechanismus, mit dem Nutzende direkt zum Hauptinhalt springen können.

WCAG akzeptiert mehrere Mechanismen: einen „Zum Hauptinhalt springen“-Link, korrekte Landmark-Regionen (<header>, <nav>, <main>, <footer>) oder eine echte Überschriftenhierarchie, durch die Screenreader-Nutzende mit der H-Taste navigieren können. In der Praxis ist ein Skip-Link in Kombination mit Landmarks die sichere Basislösung.

So wird es umgesetzt

• Als erstes fokussierbares Element der Seite einen „Zum Hauptinhalt springen“-Link einfügen. Dieser soll beim Fokussieren sichtbar werden — nicht dauerhaft verborgen sein.
• Das href-Attribut des Skip-Links auf die id des <main>-Elements verweisen lassen; tabindex="-1" an <main> ergänzen, damit der Fokusring in Safari korrekt dort landet.
• Echte Landmark-Elemente verwenden: je eine <header>, eine <nav> (oder mehrere mit aria-label), eine <main> und eine <footer> pro Seite.
• Eine saubere Überschriftengliederung pflegen, damit JAWS- und NVDA-Nutzende mit den Tasten H, 1, 2, 3 springen können.
• Bei mehreren wiederkehrenden Blöcken (Hilfsnavigation + Hauptnavigation + Breadcrumbs) ist ein zweiter Skip-Link für den aufwändigsten Block sinnvoll.

Häufige Fehler

• Skip-Link mit display: none versteckt, statt ihn aus dem sichtbaren Bereich zu verschieben und beim Fokussieren einzublenden — assistive Technologie findet ihn nicht.
• Skip-Link-Ziel ohne tabindex="-1": Safari/WebKit ignoriert den Sprung und belässt den Fokus beim Skip-Link.
• <main> innerhalb von <nav> verschachtelt oder mehrfach auf der Seite vorhanden.
• Überschriftenhierarchie überspringt Ebenen (h1 → h4) oder setzt Überschriften rein zur visuellen Größenanpassung ein, was die H-Tasten-Navigation zerstört.
• Klebende Kopfzeilen, die das fokussierte Element nach dem Auslösen des Skip-Links verdecken — siehe 2.4.11.

Warum es wichtig ist

„Wiederholte Blöcke überspringen“ ist der kostengünstigste Barrierefreiheitsgewinn auf der Liste — ein Skip-Link erfordert etwa zehn Zeilen HTML und CSS —, dennoch liegt die Fehlerrate in der jährlichen WebAIM-Million-Analyse auf Produktivseiten noch immer bei rund 60 %. Für Personen, die ausschließlich die Tastatur nutzen und ein 40-Einträge-Mega-Menü durchtabben müssen, ist das bei jedem Seitenwechsel erschöpfend und bei langen Browsing-Sitzungen schlicht unzumutbar.