Ein Sprunglink ist ein Verweis am Seitenanfang, der die wiederkehrenden Bereiche überspringt und direkt zum Inhalt führt. Er ist meist unsichtbar und erscheint erst, wenn er mit der Tastatur erreicht wird.
- Sprunglink
Verweis am Seitenanfang, der die wiederkehrenden Bereiche überspringt und zum Inhalt führt.
Beispiel: „Der Sprunglink ‚Zum Inhalt springen‘ ist das erste Element, das die Tabulatortaste erreicht.“Auch: Skip Link oder Skip Navigation. Das englische to skip heißt überspringen.
Abgrenzung zur Sprungmarke: Die Sprungmarke ist das Ziel eines Ankers irgendwo in der Seite. Der Sprunglink ist der eine Verweis am Anfang, der die Navigation überspringt.
Warum er gebraucht wird
Weil Kopfbereich und Navigation auf jeder Seite stehen. Wer mit der Tastatur arbeitet, müsste sich sonst auf jeder einzelnen Seite erneut durch dieselben zwanzig oder vierzig Menüpunkte hindurchtippen, bevor der Inhalt an die Reihe kommt.
Das Erfolgskriterium Blöcke umgehen (2.4.1) verlangt genau dafür einen Weg. Der Sprunglink ist der verbreitetste; ausgezeichnete Bereiche und eine saubere Überschriftenstruktur erfüllen es ebenfalls, helfen aber nur Screenreader-Nutzern.
Wie er umgesetzt wird
Als erster Link im Markup, mit einem Verweis auf das Hauptelement. Sichtbar wird er, sobald er den Fokus bekommt. Wichtig ist dabei das Ziel: Damit der Fokus wirklich dorthin wandert, braucht das Hauptelement ein tabindex von minus eins.
<a class="sprunglink" href="#inhalt">Zum Inhalt springen</a>
<header> ... </header>
<main id="inhalt" tabindex="-1"> ... </main>.sprunglink {
position: absolute;
left: -9999px;
}
.sprunglink:focus {
position: fixed;
inset-inline-start: 16px;
inset-block-start: 16px;
z-index: 100;
}Woran er scheitert
Daran, dass er versteckt bleibt. Wird er mit display: none oder visibility: hidden entfernt, ist er auch für die Tastatur weg. Richtig ist, ihn aus dem Sichtfeld zu schieben und bei Fokus zurückzuholen.
Der zweite Fall ist das Ziel ohne tabindex. Die Seite scrollt dann zwar an die richtige Stelle, der Fokus bleibt aber beim Sprunglink, und die nächste Tabulatortaste führt zurück in die Navigation.
Aus unserer Arbeit an über 2.500 Website-Projekten ist der Sprunglink der Baustein mit dem besten Verhältnis von Aufwand und Wirkung: ein Link, ein paar Zeilen CSS, ein Attribut am Hauptelement. Geprüft ist er in zwei Sekunden, indem man die Seite lädt und einmal die Tabulatortaste drückt.