Was sind Skip-Links und wozu dienen sie?

Skip-Links sind versteckte oder sichtbare Sprunglinks am Anfang einer Webseite, die es Tastaturnutzern und Screenreader-Nutzern ermöglichen, wiederholte Navigationselemente wie das Hauptmenü zu überspringen und direkt zum Hauptinhalt zu gelangen. Sie verbessern die Effizienz der Tastaturnavigation erheblich.

Sind Skip-Links nach WCAG vorgeschrieben?

Ja. WCAG 2.4.1 (Bypass Blocks, Level A) verlangt, dass es einen Mechanismus gibt, um Inhaltsblöcke zu überspringen, die auf mehreren Seiten wiederholt werden. Skip-Links sind die häufigste und direkteste Umsetzung dieses Kriteriums.

Müssen Skip-Links sichtbar sein?

Nein, Skip-Links können visuell versteckt sein und erst beim Fokus per Tastatur sichtbar werden. Sie müssen jedoch für Tastaturnutzer erreichbar und funktionsfähig sein. Sichtbare Skip-Links gelten als Best Practice, da sie auch für sehende Tastaturnutzer sofort erkennbar sind.

Wo auf der Seite werden Skip-Links platziert?

Skip-Links werden am Anfang des HTML-Dokuments platziert, noch vor dem Hauptmenü und anderen Navigationselementen. So ist der Link das erste fokussierbare Element auf der Seite, wenn jemand mit der Tab-Taste durch die Seite navigiert.

Reicht ein einzelner Skip-Link für eine komplexe Website?

Für einfache Websites reicht ein Skip-Link zum Hauptinhalt. Komplexe Seiten mit mehreren Inhaltsbereichen, Suchfeldern oder Seitenleisten können mehrere Skip-Links anbieten, etwa zum Hauptinhalt, zur Suche und zur Navigation. Zu viele Skip-Links können jedoch kontraproduktiv sein.

Skip-Links

19.06.2026

Drucken

Skip-Links – Direkt zum Hauptinhalt springen für bessere Barrierefreiheit

Skip-Links sind Sprunglinks, die am Anfang einer Webseite platziert werden und es Nutzerinnen und Nutzern ermöglichen, wiederholte Elemente wie das Hauptmenü zu überspringen und direkt zum Haupt-Inhalt zu gelangen. Für Menschen, die eine Website per Tastatur oder Screenreader navigieren, machen sie den Unterschied zwischen einer effizienten und einer mühsamen Nutzungserfahrung: Ohne Skip-Link muss bei jedem Seitenaufruf erneut durch alle Menüpunkte, Sprachauswahl und andere wiederkehrende Elemente navigiert werden, bevor der eigentliche Inhalt zugänglich wird.

Skip-Links sind eine der grundlegendsten und zugleich am häufigsten vergessenen Maßnahmen für Tastaturbedienbarkeit. Sie sind technisch einfach umzusetzen, haben aber einen erheblichen Einfluss auf die Zugänglichkeit einer Website für alle Nutzerinnen und Nutzer, die keine Maus verwenden. Auch Sprachsteuerungssoftware profitiert von korrekt implementierten Skip-Links.

Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet seit dem 28. Juni 2025 viele Unternehmen in Deutschland zur Einhaltung von WCAG 2.1 Level AA. Skip-Links sind dabei durch WCAG 2.4.1 als Level-A-Anforderung bereits die unterste Stufe der Barrierefreiheitspflicht.

Skip-Links auf einen Blick

✓ Definition: Sprunglinks am Anfang der Seite zum Überspringen wiederholter Navigations-Elemente
✓ WCAG-Kriterium: 2.4.1 – Bypass Blocks, Level A (gesetzliche Mindestanforderung)
✓ Zielgruppen: Tastaturnutzer, Screenreader-Nutzer, Sprachsteuerungsnutzer
✓ Sichtbarkeit: Können visuell versteckt sein und beim Fokus eingeblendet werden
✓ Platzierung: Erstes fokussierbares Element im HTML, noch vor dem Hauptmenü

Warum Skip-Links für die Navigation unverzichtbar sind

Stell dir vor, du navigierst eine Website ausschließlich per Tastatur. Auf jeder neuen Seite musst du zunächst durch das gesamte Hauptmenü tabben, vielleicht 10, 15 oder 20 Elemente, bevor du den Hauptinhalt erreichst. Das ist nicht nur ineffizient, sondern schließt Menschen mit motorischen Einschränkungen faktisch aus, wenn keine Möglichkeit besteht, diese wiederkehrenden Elemente zu überspringen.

Ein Skip-Link löst dieses Problem direkt: Als erstes fokussierbares Element am Anfang der Seite bietet er die Möglichkeit, mit einem einzigen Tastendruck direkt zum Haupt-Inhalt zu springen. Der Link ist dabei oft visuell versteckt und wird erst sichtbar, wenn er per Tab-Taste fokussiert wird. Für sehende Tastaturnutzer sollte er dann deutlich erkennbar eingeblendet werden.

Technische Umsetzung von Skip-Links

Die Implementierung eines Skip-Links ist technisch einfach. Der Link wird als erstes Element im <body> platziert und verweist auf die ID des Hauptinhaltsbereichs. Typisches Beispiel:

Der zugängliche Text des Links sollte klar beschreiben, wohin er führt, zum Beispiel „Zum Hauptinhalt springen" oder „Navigation überspringen". Wichtig: Das Ziel-Element muss per id erreichbar und, falls nötig, mit tabindex="-1" fokussierbar sein, damit der Fokus korrekt gesetzt wird.

✓ Position: Erstes Element im <body>, noch vor Header und Menü
✓ Ziel-ID: Verweist auf id="main-content" oder ähnliche Landmark-Bereiche
✓ Sichtbarkeit beim Fokus: CSS :focus blendet den Link sichtbar ein, z.B. als farbiges Banner oben links
✓ Linktext: Klar und beschreibend, z.B. „Zum Hauptinhalt springen" oder „Menü überspringen"

Skip-Links und WCAG-Bedienbarkeit

Skip-Links sind Teil des WCAG-Prinzips Bedienbarkeit und gehören zur Richtlinie 2.4 „Navigierbar". Das zugehörige Kriterium 2.4.1 ist eines der wenigen Level-A-Kriterien, die direkt die Effizienz der Navigation betreffen. Es fordert, dass ein Mechanismus existiert, mit dem Nutzerinnen und Nutzer Inhaltsblöcke überspringen können, die auf mehreren Seiten wiederholt werden.

Skip-Links sind die direkteste Umsetzung dieses Kriteriums, alternativ akzeptiert die WCAG auch klar strukturierte Landmark-Regionen (main, nav, aside) in Kombination mit einem Screenreader. Für die Praxis gilt: Beides zusammen zu implementieren ist die robusteste Lösung, da Skip-Links auch sehenden Tastaturnutzern zugutekommen, die keinen Screenreader verwenden.

Häufige Fehler bei der Umsetzung von Skip-Links

Skip-Links sind technisch einfach, werden aber trotzdem häufig fehlerhaft umgesetzt. Die häufigsten Probleme:

✓ Link nicht fokussierbar: Wenn der Skip-Link mit display: none versteckt wird statt mit einer Clip-Technik, ist er für Tastaturnutzer nicht erreichbar
✓ Ziel nicht fokussierbar: Wenn das Ziel-Element (z.B. <main>) keinen Tabindex hat, setzt der Browser den Fokus möglicherweise nicht korrekt
✓ Kein sichtbarer Fokus-Indikator: Der Link erscheint beim Fokus nicht sichtbar, sodass sehende Tastaturnutzer ihn nicht wahrnehmen
✓ Falscher Linktext: Generische Texte wie „Hier klicken" vermitteln nicht, wohin der Link führt

SiteCockpit Lösung

easyMonitoring: Fehlende Skip-Links und WCAG-2.4.1-Verstöße erkennen

easyMonitoring prüft deine Website automatisch auf fehlende oder fehlerhafte Skip-Links und weitere Verstöße gegen WCAG 2.4 (Navigierbar): nicht fokussierbare Skip-Link-Ziele, fehlende Landmark-Regionen und unzureichende Fokus-Indikatoren. Du erhältst einen Score von 0 bis 100 sowie einen detaillierten Bericht mit Fundstellen und konkreten Korrekturhinweisen.

easyMonitoring kennenlernen →

Häufige Fragen zu Skip-Links

Sehen normale Nutzer Skip-Links überhaupt?

Meist nicht, da Skip-Links standardmäßig visuell versteckt sind und nur beim Fokus per Tab-Taste eingeblendet werden. Das ist gewollt: Sie stören das visuelle Design nicht, sind aber für Tastaturnutzer sofort zugänglich. Manche Websites zeigen Skip-Links dauerhaft sichtbar, was als Best Practice gilt, weil es auch sehenden Tastaturnutzern sofort signalisiert, dass Barrierefreiheit berücksichtigt wurde.

Brauche ich Skip-Links, wenn ich schon ARIA-Landmarks verwende?

ARIA-Landmarks wie <main>, <nav> und <aside> ermöglichen Screenreader-Nutzern das direkte Anspringen von Seitenbereichen. Sie ersetzen jedoch keinen Skip-Link für sehende Tastaturnutzer, die keinen Screenreader verwenden. Beide Maßnahmen ergänzen sich und zusammen bieten sie die breiteste Abdeckung aller Tastaturnutzer.

Wie viele Skip-Links sollte eine Website haben?

Für die meisten Websites reicht ein einziger Skip-Link zum Hauptinhalt / Main Content. Komplexe Seiten mit mehreren wichtigen Bereichen, etwa einer prominenten Suche oder einer langen Seitenleiste, können zusätzliche Skip-Links anbieten. Als Faustregel gilt: So wenige wie nötig, aber so viele, dass alle wichtigen Inhaltsbereiche direkt erreichbar sind, ohne jedes Mal durch das Menü navigieren zu müssen.

Funktionieren Skip-Links auch in Single-Page-Applications (SPAs)?

In SPAs ist besondere Sorgfalt nötig. Da Seiteninhalte dynamisch nachgeladen werden, ohne dass die gesamte Seite neu lädt, muss der Fokus beim Routenwechsel aktiv verwaltet werden. Skip-Links müssen nach jedem Navigationsereignis wieder als erstes fokussierbares Element verfügbar sein. Ohne explizite Fokus-Verwaltung verlieren Tastaturnutzer beim Seitenwechsel die Orientierung.

Hat deine Website funktionierende Skip-Links?

Lass deine Website automatisch auf fehlende Skip-Links und weitere WCAG-Navigationsverstöße prüfen. easyMonitoring liefert einen detaillierten Bericht mit konkreten Fundstellen, damit du gezielt korrigieren kannst.