Sprunglink

Ein Sprunglink ist eine Tastaturverknüpfung am Seitenanfang, über die Nutzende die wiederholte Navigation direkt zum Hauptinhalt überspringen können. Er erfüllt WCAG 2.4.1 Bypass Blocks (Stufe A) und gehört zu den kostengünstigsten Maßnahmen zur Verbesserung der Barrierefreiheit.

Warum er existiert

Auf einer typischen Inhaltswebsite enthält der Header sechs Hauptnavigationslinks, einen Sprachumschalter und einen Theme-Umschalter, der Footer noch einmal zwölf Links. Jede Seite wiederholt diese Strukturen. Tastatur- oder Screenreader-Nutzende, die auf einen Artikel gelangen und ihn lesen möchten, müssen zunächst durch etwa dreißig interaktive Elemente tabben, bevor sie den Artikelinhalt erreichen. Über jede Seitennavigation hinweg summiert sich dies zu einer erheblichen Belastung.

Ein Sprunglink ist ein einziges <a href="#main-content">Skip to content</a>-Element, das als erstes fokussierbares Element im Dokument platziert wird. Die nutzende Person drückt nach dem Laden der Seite einmal Tab, sieht „Skip to content“, drückt Enter, und der Fokus springt zum Artikelinhalt.

Implementierung

Das Muster ist überschaubar, birgt jedoch einige bekannte Fallstricke:

<a class="skip-link" href="#main-content">Skip to content</a>
...
<main id="main-content" tabindex="-1">
  ...
</main>

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

Drei Details, auf die es ankommt:

1. Der Link muss beim Fokus sichtbar sein. Ein Sprunglink, der dauerhaft display: none gesetzt hat, ist für sehende Tastaturnutzende unsichtbar — sie können nicht erkennen, dass er existiert. Der Link sollte über Positionierung ausgeblendet werden, nicht über display: none oder visibility: hidden.

2. Das Ziel muss Fokus akzeptieren. Ein einfaches <main>-Element nimmt standardmäßig keinen Tastaturfokus an. Das Attribut tabindex="-1" macht es programmatisch fokussierbar, sodass der Browser den Fokus beim Folgen des Links tatsächlich dorthin verschiebt. Ohne dieses Attribut ändert sich zwar der URL-Hash, der Fokus bewegt sich jedoch nicht — und das nächste Drücken von Tab startet wieder vom Seitenanfang, was den gesamten Zweck des Sprunglinks zunichte macht.

3. Er muss das erste fokussierbare Element sein. Nicht „unter den ersten 100 Elementen“ — sondern das erste. Wenn ihm etwas vorangeht (ein Logo-Link, ein Suchsymbol), muss die nutzende Person erst daran vorbeiwechseln, bevor sie den Sprunglink erreicht — was seinen Zweck verfehlt.

Mehrere Sprunglinks

Lange Seiten mit mehreren wiederkehrenden Bereichen können von einem kleinen „Sprung“-Menü anstelle eines einzelnen Links profitieren:

• Zum Hauptinhalt springen
• Zur Navigation springen
• Zur Fußzeile springen

Eine kurze, beim Fokus sichtbare Liste mit drei oder vier Zielen ist sinnvoll. Eine lange automatisch generierte Inhaltsübersicht am Anfang jeder Seite hingegen nicht.

Was er nicht ersetzt

Ein Sprunglink ist das Sicherheitsnetz für Bypass Blocks. Er ersetzt keine korrekten Landmarks (<nav>, <main>, <aside>, <footer>), keine korrekte Überschriftenstruktur (ein <h1> pro Seite, hierarchische <h2>s) und kein ARIA aria-label auf doppelten Landmarks. Screenreader-Nutzende navigieren zwischen Bereichen und Überschriften über Tastaturkürzel, die auf diese Strukturen angewiesen sind; der Sprunglink richtet sich primär an sehende Nutzende, die ausschließlich die Tastatur verwenden.