Was ist ein Sprunglink zur Navigation?

Ein Link, meist das erste fokussierbare Element der Seite, der den Fokus direkt auf den Hauptinhalt setzt. Er ist häufig visuell verborgen, bis er den Fokus erhält, und hilft Tastaturnutzern, ohne das Design zu verändern.

Warum ist ein Sprunglink nötig?

Ohne ihn müssen Tastatur- und Screenreader-Nutzer auf jeder Seite den gesamten Kopfbereich und das Menü durchtabben – oft 15 Stationen oder mehr –, bevor sie den Inhalt erreichen.

Wie füge ich einen Sprunglink hinzu?

Setzen Sie ganz oben auf der Seite einen Link, dessen Ziel die Fragment-ID Ihres ` `-Elements ist (etwa #main), machen Sie ihn per CSS bei Fokus sichtbar und stellen Sie sicher, dass das Ziel den Fokus aufnehmen kann.

Häufige Verstöße

Fehlende Sprung-Navigation: Warum jede Seite einen Bypass-Link braucht

Stellen Sie sich eine Website mit einem Header vor, der ein Logo, ein 12-teiliges Navigationsmenü, ein Suchfeld und einen Anmelde-Link enthält – etwa 15 Tab-Stopps, bevor der Hauptinhalt erreicht wird. Das Auge eines Mausnutzers springt direkt über all das hinweg zu dem, weswegen er eigentlich gekommen ist. Ein Tastatur- oder Screenreader-Nutzer muss jeden dieser 15 Stopps durchtabben, auf jeder einzelnen Seite, jedes einzelne Mal, wenn er zu etwas Neuem navigiert.

WCAG-Erfolgskriterium 2.4.1 (Bereiche überspringen), Stufe A, verlangt einen Mechanismus, um wiederholten Inhalt zu überspringen – meist einen "Zum Hauptinhalt springen"-Link. Branchendaten beziffern dies auf etwa 55 % der ADA-Beschwerden zur Web-Barrierefreiheit.

Wie man es behebt

Das Standardmuster ist ein Link, der das allererste fokussierbare Element auf der Seite ist, visuell verborgen bleibt, bis er den Tastaturfokus erhält, und direkt zum Hauptinhalt springt:

<body>
  <a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
  <header>...</header>
  <nav>...</nav>
  <main id="main-content">
    <!-- eigentlicher Seiteninhalt beginnt hier -->
  </main>
</body>

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}

Der Link muss nur sichtbar sein, wenn er fokussiert ist – ihn ansonsten zu verbergen ist korrekt, kein Kompromiss, da sehende Mausnutzer ihn nicht benötigen und ein dauerhaft sichtbarer Sprung-Link für sie nur visuelle Unordnung wäre.

Landmarken sind die andere Hälfte der Lösung

Ein Sprung-Link löst das "bring mich an der Navigation vorbei"-Problem, aber korrekte Landmarken-Bereiche (<header>, <nav>, <main>, <footer>, oder ihre ARIA-Äquivalente role="banner"/role="navigation"/role="main"/role="contentinfo") geben Screenreader-Nutzern einen zweiten, oft schnelleren Weg: Die meisten Screenreader bieten eine Abkürzung, um direkt zwischen Landmarken zu springen, ganz ohne sichtbaren Link. Eine Seite mit einem echten <main>-Element erfüllt bereits einen Teil davon, noch bevor ein Sprung-Link hinzugefügt wird – die beiden Techniken ergänzen sich, sie sind nicht redundant.

Warum sich das auch auf einer "einfachen" Website zu beheben lohnt

Dieser Punkt lässt sich leicht auf die niedrige Prioritätsstufe herabstufen, weil er einen sehenden Nutzer nie blockiert und das fehlende Verhalten unsichtbar ist, solange man nicht tatsächlich mit der Tastatur testet. Aber für die Menschen, die es betrifft, verwandelt es "kurz lästig" in "aktiv anstrengend, Ihre Website überhaupt zu benutzen" – und weil es ein Kriterium der Stufe A mit einer bekannten, fünfminütigen Lösung ist, ist es auch einer der schnellsten Erfolge bei einer frischen Barrierefreiheitsprüfung.

Offizielle Referenzen

Häufige Fragen

Was ist ein Sprunglink zur Navigation?: Ein Link, meist das erste fokussierbare Element der Seite, der den Fokus direkt auf den Hauptinhalt setzt. Er ist häufig visuell verborgen, bis er den Fokus erhält, und hilft Tastaturnutzern, ohne das Design zu verändern.
Warum ist ein Sprunglink nötig?: Ohne ihn müssen Tastatur- und Screenreader-Nutzer auf jeder Seite den gesamten Kopfbereich und das Menü durchtabben – oft 15 Stationen oder mehr –, bevor sie den Inhalt erreichen.
Wie füge ich einen Sprunglink hinzu?: Setzen Sie ganz oben auf der Seite einen Link, dessen Ziel die Fragment-ID Ihres `<main>`-Elements ist (etwa #main), machen Sie ihn per CSS bei Fokus sichtbar und stellen Sie sicher, dass das Ziel den Fokus aufnehmen kann.