Skip-Links & semantische Landmarks
Mit der Tastatur springt man direkt zum Hauptinhalt. Man muss nicht Navigation und Kopfbereich durchgehen.
Was bedeutet „Skip-Links & semantische Landmarks"?
Skip-Links sind verborgene Links am Anfang der Seite. Sie werden beim ersten Tastendruck mit der Tastatur sichtbar. Sie helfen Nutzern, direkt zum Hauptinhalt zu springen. Sie gehen dabei an Navigation, Kopfbereich und Werbung vorbei. Bedeutungsvolle Elemente wie , , , helfen blinden Nutzern. Sie zeigen die Bereiche der Seite und erlauben Sprünge mit Tastenkombinationen.
Pflicht und Nutzen — WCAG 2.4.1.
Die Regel WCAG 2.4.1 (Überspringen von Blöcken) verlangt das Überspringen von sich wiederholenden Inhalten. Das ist Pflicht auf Niveau A. Ohne Skip-Link muss ein Nutzer viele Menü-Punkte durchgehen. Er kommt erst dann zum Inhalt. Bei Nutzern mit Vorlese-Programm ist es genauso. Sie hören die gesamte Navigation zuerst.
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
:focuswird er sichtbar — mit AAA-Kontrast. - Strukturelle Landmarks korrekt eingesetzt: ein
<header>, ein<main id="main">, ein<footer>pro Page.<nav>-Elemente mitaria-labelfür Mehrdeutigkeit (z. B. „Hauptnavigation", „Brotkrumen"). - Validierung im Browser-Devtools-Accessibility-Tree und mit Screenreader (VoiceOver / NVDA).
Verwandte Bausteine unserer Modulsuite
-
Barrierefreie Formulare
WCAG 3.3.1Klare Labels, programmatische Fehlerführung, Validierung — keine Browser-Bubbles, kein „Bitte ausfüllen".
-
Sichtbarer Fokus-Indikator
WCAG 2.4.11Wer per Tab navigiert, weiß immer wo. Kein verschwindender Outline.
-
Leichte Sprache (KI-gestützt)
WCAG 3.1.5Inhalte auf Knopfdruck vereinfacht — für Menschen mit Lese-Einschränkungen, Sprachlerner und Eilige.
-
Vollständige Tastatur-Navigation
WCAG 2.1.1Jede Funktion erreichbar — ohne Maus. Pflicht für Screenreader-Nutzer, Hilfe für jeden anderen.
Brauchen Sie genau dieses Modul?
Wir bieten ein 15-minütiges Erstgespräch an. Wir prüfen, ob es für Ihre Webseite wichtig ist. Weitere Infos: BFSG-Übersicht, Leistungen, BAFA-Förderung, häufige Fragen.