Eine Sprungmarke (englisch Skip-Link) ist ein Link, der Tastatur- und Screenreader-Nutzern erlaubt, wiederkehrende Inhalte zu überspringen. Auf fast jeder Seite stehen oben dieselben Blöcke: Logo, Navigation, Suche. Wer mit der Tastatur bedient, müsste sich auf jeder Unterseite erneut durch all diese Links tabben, bevor er den eigentlichen Inhalt erreicht. Der Skip-Link „Zum Inhalt springen“ überspringt das in einem Schritt. Er erfüllt das WCAG-Erfolgskriterium 2.4.1 (Blöcke umgehen).
Wie du es umsetzt
Der Skip-Link ist das erste fokussierbare Element im <body>. Er verweist per Anker auf den Hauptinhalt:
- Link:
<a href="#inhalt" class="skip-link">Zum Inhalt springen</a> - Ziel: dein
<main id="inhalt">
Üblicherweise blendest du den Link per CSS aus dem sichtbaren Bereich aus und holst ihn erst beim Tastatur-Fokus (:focus) zurück. Wichtig: Nicht mit display:none verstecken, denn dann ist er gar nicht fokussierbar. Nutze stattdessen eine off-screen-Technik, die das Element fokussierbar lässt.
Häufiger Fehler
Viele WordPress-Themes liefern zwar einen Skip-Link, aber sein Ziel hat keinen passenden id-Anker oder ist nicht fokussierbar. Dann springt der Fokus ins Leere. Teste es selbst: Lade die Seite, drücke einmal Tab – erscheint der Skip-Link sichtbar? Drücke Enter – landet der Fokus wirklich im Inhalt? Skip-Links wirken am besten zusammen mit klaren ARIA-Landmarks und einem sichtbaren Fokus-Indikator. Sie sind ein zentraler Baustein guter Tastaturbedienbarkeit und der gesamten Barrierefreiheit.