Skip-Link: Direkt zum Hauptinhalt springen
Also called: Sprunglink, Sprungmarke zum Inhalt, Zum Inhalt springen
Definition
Ein Skip-Link ist ein Link ganz oben auf der Seite, der direkt zum Hauptinhalt springt. So müssen Tastatur- und Screenreader-Nutzer nicht auf jeder Seite das ganze Menü durchlaufen. Er ist eine ausreichende Technik für WCAG 2.4.1.
Ein Skip-Link ist der erste Link einer Seite, meist mit dem Text „Zum Inhalt springen“. Er bringt Tastatur- und Screenreader-Nutzer an Logo, Menü und Suchleiste vorbei direkt zu dem Inhalt, wegen dem sie gekommen sind. Ohne ihn bedeutet ein Menü mit 40 Links: 40-mal Tab drücken – auf jeder einzelnen Seite.
Was es bedeutet
Der Sprunglink ist der klassische Weg, WCAG 2.4.1 Blöcke umgehen zu erfüllen – ein Kriterium der Stufe A in WCAG 2.2. Es verlangt einen Mechanismus, um Inhaltsblöcke zu überspringen, die sich auf mehreren Webseiten wiederholen. Typische Blöcke sind Kopfbereich, Hauptnavigation und Werbeflächen. Über EN 301 549 (Abschnitt 9.2.4.1) gilt die Anforderung auch für das Barrierefreiheitsstärkungsgesetz.
Das W3C nennt, wer profitiert: Screenreader-Nutzer, die nicht mehr auf jeder Seite denselben Kopfbereich hören; Menschen, die auf Tastaturbedienung angewiesen sind und mit weniger Tastendrücken ans Ziel kommen; und Nutzer von Bildschirmlupen, die nicht mehr suchen müssen, wo der Inhalt beginnt.
Ein Skip-Link ist nicht der einzige Weg zu 2.4.1. Das W3C nennt mehrere ausreichende Techniken:
| Technik | W3C-Nummer | Was sie leistet |
|---|---|---|
| Sprunglink zum Hauptinhalt | G1 | Link oben auf jeder Seite springt zum Inhalt |
| Link am Anfang eines wiederkehrenden Blocks | G123 | Springt an das Ende dieses Blocks |
| Links zu allen Inhaltsbereichen | G124 | Ein kleines Inhaltsverzeichnis oben |
| Überschriften am Anfang von Abschnitten | H69 | Screenreader-Nutzer springen von Überschrift zu Überschrift |
| Landmarks | ARIA11 | ARIA-Landmarks kennzeichnen Kopf, Navigation und Hauptinhalt |
Praxisbeispiele
<body>
<a class="skip-link" href="#inhalt">Zum Inhalt springen</a>
<header>… Logo, Navigation mit 40 Links …</header>
<main id="inhalt" tabindex="-1">
<h1>Laufschuhe</h1>
</main>
</body>
<style>
.skip-link { position: absolute; left: 8px; top: -100px; }
.skip-link:focus { top: 8px; background: #ffffff; color: #1a1a1a; padding: 8px 16px; }
</style>Der Link liegt außerhalb des sichtbaren Bereichs, bis er den Fokus erhält, und erscheint dann. tabindex="-1" am Ziel sorgt dafür, dass der Browser den Fokus zuverlässig dorthin setzt – der nächste Tab geht im Hauptinhalt weiter.
Den Skip-Link als erstes fokussierbares Element einbauen, ihn bei Fokus deutlich zeigen, einen klaren Text wie „Zum Inhalt springen“ verwenden und auf eine id verweisen, die auf jeder Seite existiert.
Den Link mit display: none verstecken (dann erhält er keinen Fokus mehr), ihn bei Fokus unsichtbar lassen oder auf ein Ziel verweisen, das eine Vorlage nicht mehr enthält.
Ein versteckter Skip-Link muss bei Fokus sichtbar werden. Sonst drücken sehende Tastaturnutzer Tab und scheinbar passiert nichts – das verstößt zusätzlich gegen den sichtbaren Fokus.
So prüfen Sie einen Skip-Link
Häufige Fragen
Was ist ein Skip-Link?
Ein Link ganz oben auf der Seite, der direkt zum Hauptinhalt springt. Damit überspringen Tastatur- und Screenreader-Nutzer Kopfbereich und Navigation, die sich auf jeder Seite wiederholen.
Ist ein Skip-Link nach WCAG Pflicht?
Nicht ausdrücklich. WCAG 2.4.1 Blöcke umgehen verlangt einen Weg, wiederkehrende Blöcke zu überspringen. Der Skip-Link ist die häufigste ausreichende Technik, Überschriften und Landmarks sind weitere. Viele Prüfungen erwarten ihn trotzdem, weil er auch sehenden Tastaturnutzern hilft.
Muss der Skip-Link immer sichtbar sein?
Er darf versteckt bleiben, bis er den Fokus erhält – dann muss er deutlich sichtbar werden. Ein Link, der fokussiert, aber unsichtbar ist, verwirrt sehende Tastaturnutzer.
Warum funktioniert mein Skip-Link nicht?
Die häufigsten Ursachen: Die Ziel-id existiert nicht, der Link ist mit display: none versteckt, oder der Fokus springt nicht mit. Gegen Letzteres hilft meist tabindex="-1" am Zielelement.
Wie prüfe ich meine Website auf fehlende Skip-Links?
Drücken Sie auf jeder Seitenvorlage einmal Tab. Für eine breitere Prüfung von Navigations- und Strukturfehlern nutzen Sie den kostenlosen WCAG-Scanner auf Ihrer Startseite.
Related terms
Tastaturbedienung: WCAG 2.1.1 einfach erklärt
Tastaturbedienung bedeutet, dass sich jede Funktion einer Website allein mit der Tastatur erreichen und bedienen lässt – meist mit Tab, Umschalt+Tab, Enter, Leertaste und Pfeiltasten. WCAG 2.1.1 verlangt das auf Stufe A.
Read definition: Tastaturbedienung: WCAG 2.1.1 einfach erklärtARIA-Landmarks: Seitenbereiche für Screenreader
ARIA-Landmarks sind Rollen wie banner, navigation, main und contentinfo, die die großen Bereiche einer Seite kennzeichnen. Screenreader listen sie auf, sodass Nutzer direkt zu jedem Bereich springen können.
Read definition: ARIA-Landmarks: Seitenbereiche für ScreenreaderSichtbarer Fokus: WCAG 2.4.7 richtig umsetzen
Sichtbarer Fokus bedeutet, dass eine Website das Element, das gerade den Tastaturfokus hat, deutlich markiert – meist mit einem Rahmen. WCAG 2.4.7 verlangt das auf Stufe AA.
Read definition: Sichtbarer Fokus: WCAG 2.4.7 richtig umsetzenTastaturfalle: WCAG 2.1.2 erklärt und behoben
Eine Tastaturfalle ist ein Bereich einer Seite, in den der Tastaturfokus hineinkommt, aus dem er aber nicht allein per Tastatur wieder herauskommt. WCAG 2.1.2 Keine Tastaturfalle verbietet das auf Stufe A.
Read definition: Tastaturfalle: WCAG 2.1.2 erklärt und behoben