Zum Inhalt springen

WCAG 2.4.1 · WCAG-Modul

Skip-Links & semantische Landmarks

Tastatur springt direkt zum Hauptinhalt — ohne durch Navigation und Header zu hangeln.

Was ist das?

Was bedeutet „Skip-Links & semantische Landmarks"?

Skip-Links sind unsichtbare Sprung-Links am Seitenanfang, die beim ersten Tastatur-Tab sichtbar werden und Tastatur-Nutzer direkt zum Hauptinhalt springen lassen — an Navigation, Header und Werbung vorbei. Semantische Landmarks (<header>, <nav>, <main>, <footer>) geben Screenreadern eine Karte der Seite, sodass Nutzer per Shortcut zwischen Bereichen wechseln können.

Warum wichtig?

Pflicht und Nutzen — WCAG 2.4.1.

WCAG 2.4.1 (Bypass Blocks) verlangt, dass wiederkehrende Inhalts-Blöcke übersprungen werden können — das ist nicht „nice to have", sondern Pflicht auf Level A. Ohne Skip-Link muss ein Tastatur-Nutzer auf jeder Unterseite Dutzende Menü-Items durchtabben, bevor er zum eigentlichen Inhalt kommt. Bei Screenreader-Nutzern dasselbe — sie hören die ganze Navigation vor.

Unsere Umsetzung

Wie wir es konkret lösen.

  • Erstes fokussierbares Element auf jeder Page: <a class="skip-link" href="#main">Zum Hauptinhalt springen</a>.
  • CSS versteckt den Link visuell (negativ positioniert), beim :focus wird er sichtbar — mit AAA-Kontrast.
  • Strukturelle Landmarks korrekt eingesetzt: ein <header>, ein <main id="main-bf-dup-1" aria-hidden="true">, ein <footer> pro Page. <nav>-Elemente mit aria-label für Mehrdeutigkeit (z. B. „Hauptnavigation", „Brotkrumen").
  • Validierung im Browser-Devtools-Accessibility-Tree und mit Screenreader (VoiceOver / NVDA).
Weitere WCAG-Module

Verwandte Bausteine unserer Modulsuite

Alle Module in der BFSG-Übersicht →

Brauchen Sie genau dieses Modul?

15 Minuten Erstgespräch — wir klären, ob es für Ihre Site relevant ist.

Erstgespräch buchen

Weiterführend:
BFSG-Übersicht ·
Leistungs-Übersicht ·
BAFA-Förderung ·
FAQs

Leichte Sprache