Was sind Sprunglinks und wie sollen diese implementiert werden?

Sprunglinks (auch „Skip Links“ genannt) sind ein wichtiges Mittel, um die Barrierefreiheit einer Website zu verbessern, insbesondere für Nutzer:innen, die Tastatur oder Screenreader verwenden. Hier sind die wichtigsten Barrierefreiheitsaspekte, die für Sprunglinks beachtet werden müssen:

Barrierefreiheitsaspekte für Sprunglinks

Sichtbarkeit bei Fokus:
Sprunglinks sollten standardmäßig nicht sichtbar sein, aber sichtbar werden, sobald sie den Tastaturfokus erhalten. So können Tastaturnutzer:innen sie leicht finden und nutzen.
Eindeutige und verständliche Beschriftung:
Die Linktexte sollten klar und aussagekräftig sein, z. B. „Zum Hauptinhalt springen“ oder „Zur Navigation springen“, damit Nutzer:innen sofort wissen, wohin der Link führt.
Programmgesteuerte Fokussierung:
Nach dem Aktivieren eines Sprunglinks sollte der Fokus programmatisch auf das Ziel-Element (z. B. Hauptinhalt) gesetzt werden, damit Nutzer:innen direkt dorthin springen und mit der Interaktion beginnen können.
Ziel-Elemente mit eindeutigen IDs:
Die Ziele der Sprunglinks müssen mit eindeutigen IDs versehen sein, damit der Sprung präzise funktioniert.
Sprunglinks sollten am Anfang der Seite stehen:
Damit Tastaturnutzer:innen die Sprunglinks als erste erreichen, sollten diese im Quellcode möglichst ganz oben stehen.
Keine unerwarteten Kontextwechsel:
Der Sprung darf keine störenden oder unerwarteten Änderungen im Seitenkontext verursachen, die Nutzer:innen verwirren könnten.

Code Beispiel

<a href="#hauptinhalt" class="skip-link">Zum Hauptinhalt springen</a>

<!-- ... weiter oben auf der Seite ... -->

<main id="hauptinhalt" tabindex="-1">
  <!-- Hauptinhalt der Seite -->
</main>

Erklärung:
Der Link mit href="#hauptinhalt" springt direkt zum Element mit der ID hauptinhalt.
Das Ziel-Element (hier <main>) hat ein tabindex="-1", damit es programmatisch den Fokus erhalten kann, wenn der Sprunglink aktiviert wird. Das ist wichtig, damit Nutzer von Screenreadern oder Tastaturnutzer direkt am Ziel sind.
Die Klasse skip-link wird oft genutzt, um den Link optisch nur beim Fokussieren sichtbar zu machen (z. B. mit CSS :focus), damit er nicht ständig im Sichtfeld ist, aber leicht zugänglich bleibt.

CSS Beispiel

Hier ist ein einfaches Beispiel für CSS, mit dem ein Sprunglink (Skip Link) nur sichtbar wird, wenn er per Tastatur fokussiert ist. So bleibt der Link für Screenreader und Tastaturnutzer zugänglich, stört aber nicht das visuelle Design für Mausnutzer:

.skip-link {
  position: absolute;
  top: -40px; /* Link zunächst außerhalb des sichtbaren Bereichs */
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 100;
  transition: top 0.3s ease;
  text-decoration: none;
}

.skip-link:focus {
  top: 0; /* Link rutscht beim Fokussieren in den sichtbaren Bereich */
  outline: 2px solid #fff;
}

Wie das funktioniert:

Der Link ist standardmäßig oben außerhalb des Bildschirms positioniert (top: -40px).
Sobald der Link per Tastatur fokussiert wird (:focus), wird er sichtbar, indem er nach unten auf top: 0 verschoben wird.
Das sorgt dafür, dass Nutzer, die mit der Tastatur navigieren, den Sprunglink sehen und nutzen können.
Die Umrandung (outline) macht den Fokus gut sichtbar.