html-einfach.de

Barrierefreie Komponenten · Navigation & Bedienelemente

Skip-Links: Zum Inhalt springen

Von Zuletzt geändert am

Stell dir vor, du bedienst eine Website nur mit der Tastatur. Auf jeder neuen Seite musst du dich erst mit der Tab-Taste durch das komplette Menü arbeiten, bevor du den eigentlichen Inhalt erreichst – bei einem großen Mega-Menü können das Dutzende von Schritten sein, auf jeder einzelnen Seite. Genau dieses wiederkehrende Hindernis räumt ein Skip-Link aus dem Weg.

Ein Skip-Link ist ein „Zum Inhalt springen“-Link ganz am Anfang der Seite, der direkt zum Hauptinhalt führt. Er kostet ein paar Zeilen Code und ist für mich ein Pflichtbaustein jedes Templates – die WCAG führen ihn unter Kriterium 2.4.1 („Bypass Blocks“).

Das Grundmuster

Der Skip-Link ist das erste fokussierbare Element im <body> und zeigt per Anker auf das <main>:

<body>
  <a class="skip-link" href="#main">Zum Inhalt springen</a>
  <header>…</header>
  <nav aria-label="Hauptnavigation">…</nav>

  <main id="main" tabindex="-1">
    <h1>Seitentitel</h1>
    …
  </main>
</body>

Zwei Details entscheiden über die Funktion: Das Ziel braucht eine id (#main), und das tabindex="-1" am <main> sorgt dafür, dass der Fokus zuverlässig dort landet – ohne das Attribut springt zwar der Bildlauf, der Tastaturfokus bleibt in manchen Browsern aber zurück. Das <main> ist nebenbei das natürliche Sprungziel, weil es ohnehin den zentralen Inhalt der Seite umschließt.

Sichtbar werden, wenn er gebraucht wird

Ein Skip-Link soll das Layout nicht stören, für Tastaturnutzung aber sofort da sein. Die übliche – und richtige – Lösung: optisch ausblenden, aber bei Fokus einblenden. Wichtig ist, dass er fokussierbar bleibt; display: none oder visibility: hidden würden ihn aus der Tab-Reihenfolge nehmen und damit unbrauchbar machen.

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  padding: 0.5rem 1rem;
  background: #16181d;
  color: #fff;
  border-radius: 0.5rem;
  transform: translateY(-150%); /* aus dem Sichtfeld geschoben … */
  transition: transform 0.15s ease;
}
.skip-link:focus {
  transform: translateY(0); /* … und bei Fokus sichtbar */
}

Genau so ist der Skip-Link auch auf dieser Website umgesetzt: unsichtbar, bis man mit Tab auf die Seite kommt – dann erscheint er oben links als Erstes. Probier es ruhig aus.

Mehr als ein Sprungziel?

Für die meisten Seiten genügt der eine Link zum Hauptinhalt. Bei sehr umfangreichen Layouts können weitere Skip-Links sinnvoll sein – etwa „Zur Suche“ oder „Zur Navigation“. Ich halte mich da aber zurück: Ein einziger, verlässlicher Sprung zum Inhalt ist mir lieber als eine Liste von Sprungzielen, durch die man sich erst wieder hindurchlesen muss.

Ergänzend wirken übrigens saubere Landmarks: Screenreader-Nutzende können über <header>, <nav> und <main> ohnehin direkt springen. Der Skip-Link ist vor allem für alle gedacht, die mit der Tastatur, aber ohne Screenreader unterwegs sind – und diese Gruppe wird leicht übersehen.

Häufige Fehler

  • Skip-Link bei Fokus nicht sichtbar. Bleibt er dauerhaft versteckt, ist der Sprung zwar möglich, aber niemand sieht, wo er gerade ist.
  • display: none zum Verstecken. Nimmt den Link aus der Tab-Reihenfolge – dann ist er gar nicht erreichbar.
  • Fehlendes Sprungziel. href="#main" ohne ein Element mit id="main" führt ins Leere.
  • Fokus springt nicht mit. Ohne tabindex="-1" am Ziel folgt in einigen Browsern nur der Bildlauf, nicht der Fokus.
  • Nicht das erste Element. Steht der Skip-Link hinter anderen fokussierbaren Elementen, verfehlt er seinen Zweck.

Häufige Fragen

Wenn vor dem Inhalt nur wenige Elemente stehen, ist der Nutzen klein. Schaden tut er nie – und sobald eine wiederkehrende Navigation davorsteht, ist er WCAG-relevant. Ich baue ihn deshalb standardmäßig ein.

Reichen Landmarks nicht aus?

Für Screenreader-Nutzung sind Landmarks ein sehr guter Weg. Wer aber mit der Tastatur navigiert und keinen Screenreader nutzt, hat diese Sprungfunktion nicht – für sie ist der sichtbare Skip-Link da. Beides ergänzt sich.

Auf den Anfang des Hauptinhalts, also in der Regel <main>. Das ist eindeutig und deckt sich mit dem, was Nutzende erwarten.

Fazit

Ein Skip-Link ist eine kleine Investition mit spürbarer Wirkung: das erste fokussierbare Element, sichtbar bei Fokus, mit Sprung zum <main id="main" tabindex="-1">. Er erspart Tastaturnutzenden auf jeder Seite den Weg durch die komplette Navigation. Wenige Zeilen, die ich in keinem Template missen möchte – und ein guter erster Test für die Tastaturbedienung insgesamt.