Kostenloser Scan

1. November 2026

Skip-Link zum Inhalt springen: Zweck, Platzierung und Umsetzung

Ein Skip-Link „Zum Inhalt springen“ ist ein Link am Anfang der Seite oder am Beginn eines wiederholten Blocks, mit dem Nutzer direkt zum Hauptinhalt oder zum Ende eines wiederholten Blocks springen. Er dient dem WCAG-Erfolgskriterium 2.4.1 „Blöcke umgehen“ der Stufe A, nach dem „ein Mechanismus verfügbar ist, um Inhaltsblöcke zu umgehen, die auf mehreren Webseiten wiederholt werden“. Laut W3C soll das Kriterium die Navigation per Tastatur erleichtern: Menschen, die auf die Tastatur angewiesen sind, sollen sich effizient durch Seiten bewegen können. Praktisch heißt das, nicht auf jeder Seite dieselben wiederholten Blöcke durchlaufen zu müssen, etwa den Kopfbereich, die Navigationslinks oder Werbeframes. Der Skip-Link ist allerdings nicht der einzige Weg, dieses Kriterium zu erfüllen: Auch ARIA-Landmarks und Abschnittsüberschriften zählen zu den anerkannten Techniken. So wählen, platzieren und codieren Sie diese Mechanismen.

Wozu dient ein Skip-Link zum Inhalt springen (WCAG 2.4.1)?

Kriterium 2.4.1 soll Menschen, die Inhalte sequenziell durchgehen, einen direkteren Zugang zum Hauptinhalt der Seite verschaffen. Websites wiederholen oft dieselben Blöcke von Seite zu Seite: Das W3C nennt Navigationslinks, Inhalte des Kopfbereichs und Werbeframes. Kleine wiederholte Teile wie einzelne Wörter, Wendungen oder einzelne Links gelten dagegen nicht als Blöcke im Sinne des Kriteriums.

Sehende Nutzer können diese Blöcke ignorieren, indem sie direkt auf die Bildschirmmitte schauen, und Mausnutzer erreichen den gewünschten Link mit einem einzigen Klick. Wer sequenziell navigiert, muss dagegen in der Regel auf jeder Seite alle Links und Formularelemente durchlaufen, die vor dem gesuchten Element liegen. Das W3C nennt als Beispiel die Startseite eines Nachrichtenangebots: Nutzt man den Link oben auf der Seite nicht, muss ein Tastaturnutzer durch etwa 40 Links tabben, um den Hauptartikel zu erreichen, und ein Screenreader-Nutzer muss sich 200 Wörter anhören.

Wo platzieren Sie den Skip-Link?

Die vom W3C veröffentlichten hinreichenden Techniken beschreiben drei mögliche Positionen für Skip-Links. Welche passt, hängt vom Aufbau Ihrer Templates und von der Lage der wiederholten Blöcke ab.

Technik G1 bedeutet, oben auf jeder Seite einen Link einzufügen, der direkt zum Hauptinhaltsbereich führt; in der Praxis steht er damit vor Kopfbereich und Menü. Das W3C nennt außerdem das Beispiel eines Onlineshops, der vor den Suchergebnissen eine lange Filterliste anzeigt: Ein Link oberhalb der Liste ermöglicht es, die Filter zu überspringen und schnell zu den Produkten zu gelangen. Dieser Fall entspricht dem Grundgedanken von Technik G123, also einem Link am Beginn eines wiederholten Blocks, der zum Ende dieses Blocks führt.

Auch die Position der wiederholten Blöcke spielt eine Rolle. Das W3C stellt klar, dass das Kriterium keine Methoden verlangen will, die Funktionen des Browsers doppeln: Die meisten Browser bieten Tastenkürzel, um den Fokus an den Seitenanfang zu setzen. Steht eine Gruppe von Navigationslinks am Seitenende, kann ein „Überspringen“-Link daher unnötig sein.

Skip-Link „Zum Inhalt springen“ im HTML umsetzen

Technik G1 bedeutet, oben auf jeder Seite einen Link einzufügen, der direkt zum Hauptinhaltsbereich führt. Eine gängige Umsetzung ist ein Ankerlink auf eine id, die diesem Bereich zugewiesen ist, wie im folgenden Beispiel. Das Beispiel nutzt außerdem ein nav-Element für die Navigation (beratende Technik H97, die zusammengehörige Links gruppiert), ein main-Element und eine Überschrift am Anfang des Inhalts, die das Prinzip von Technik H69 veranschaulicht.

Prüfen Sie danach das tatsächliche Verhalten nur mit der Tastatur, ohne Maus: Wenn Sie vom Seitenanfang aus tabben, sollten Sie den Link vor Kopfbereich und Menü erreichen, und seine Aktivierung sollte Sie zum Beginn des Hauptinhalts bringen. Testen Sie jedes Template Ihrer Website, denn das Kriterium betrifft Blöcke, die sich über mehrere Seiten wiederholen.

<body>
  <a href="#inhalt" class="skip-link">Zum Inhalt springen</a>

  <header>…</header>

  <nav aria-label="Hauptnavigation">
    <ul>
      <li><a href="/">Startseite</a></li>
      <li><a href="/preise">Preise</a></li>
    </ul>
  </nav>

  <main id="inhalt">
    <h1>Seitentitel</h1>
    …
  </main>
</body>

Skip-Link verbergen, ohne ihn unzugänglich zu machen

Viele Teams möchten den Skip-Link visuell verbergen, damit er das Design nicht verändert. Der W3C-Text schreibt keine Technik zum Verbergen vor, stellt aber eine wichtige Regel auf: Laut der Definition von „Mechanismus“ muss dieser selbst alle Erfolgskriterien der beanspruchten Konformitätsstufe erfüllen. Das Verbergen darf den Link also nicht für die Tastaturnutzer unbrauchbar machen, für die er gedacht ist.

Gute Praxis: Wenn Sie ihn verbergen, sorgen Sie dafür, dass er per Tastatur erreichbar bleibt und sichtbar wird, sobald er den Fokus erhält. Das folgende CSS-Beispiel verschiebt den Link aus dem sichtbaren Bereich, solange er keinen Fokus hat, und zeigt ihn dann oben auf der Seite an. Prüfen Sie es immer mit der Tastatur, ohne Maus, in jedem Ihrer Templates.

.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.5rem 1rem;
  background: #ffffff;
  color: #000000;
  z-index: 1000;
}

ARIA-Landmarks und Überschriften: weitere Wege, Blöcke zu umgehen

Kriterium 2.4.1 beschränkt sich nicht auf Skip-Links. Das W3C erkennt eine zweite Gruppe hinreichender Techniken an: wiederholte Inhaltsblöcke so zu gruppieren, dass sie übersprungen werden können. Zur Erinnerung: Das W3C beschreibt assistive Technologien als Werkzeuge, die unter anderem zusätzliche Navigations- oder Orientierungsmechanismen bereitstellen.

Eine dieser Techniken genügt, doch nichts spricht dagegen, sie mit einem Skip-Link zu kombinieren. Eine Anmerkung zum Kriterium hält zudem fest, dass das W3C strukturelles Markup auf einzelnen Seiten gemäß Kriterium 1.3.1 nachdrücklich empfiehlt, auch wenn 2.4.1 Blöcke betrifft, die sich über mehrere Seiten wiederholen. Schließlich kann es selbst bei einer Seite, die zu keiner Gruppe zusammengehöriger Webseiten gehört, hilfreich, aber nicht vorgeschrieben sein, wiederholte Textblöcke innerhalb der Seite überspringbar zu machen.

Häufige Fragen

Was ist ein Skip-Link zum Inhalt springen?

Ein Link, meist ganz oben auf der Seite, der direkt zum Hauptinhalt führt, ohne dass wiederholte Blöcke wie Kopfbereich oder Menü durchlaufen werden müssen. Er entspricht der W3C-Technik G1 für das WCAG-Kriterium 2.4.1.

Ist ein Skip-Link Pflicht?

Kriterium 2.4.1 der Stufe A verlangt einen Mechanismus, um Blöcke zu umgehen, die auf mehreren Seiten wiederholt werden. Der Skip-Link ist eine der hinreichenden Techniken, aber nicht die einzige: Auch ARIA-Landmarks (ARIA11) oder Überschriften am Beginn jedes Abschnitts (H69) sind anerkannte Techniken.

Wo gehört der Skip-Link im HTML hin?

Für Technik G1 oben auf jede Seite, vor die wiederholten Blöcke, mit dem Ziel im Hauptinhaltsbereich. Um einen bestimmten Block wie eine Filterliste zu überspringen, setzen Sie den Link an den Beginn dieses Blocks und lassen ihn auf dessen Ende zeigen (im Sinne von Technik G123).

Darf man einen Skip-Link verstecken?

Das W3C schreibt keine Technik zum Verbergen vor, aber der Mechanismus muss selbst alle Kriterien der beanspruchten Konformitätsstufe erfüllen. Ist er visuell verborgen, empfehlen wir als gute Praxis, dass er mit der Tab-Taste erreichbar bleibt und erscheint, sobald er den Fokus erhält.

Braucht man einen Skip-Link, wenn das Menü unten auf der Seite steht?

Nicht unbedingt. Laut W3C bieten die meisten Browser Tastenkürzel, um an den Seitenanfang zu gelangen: Stehen die Navigationslinks unten, kann ein „Überspringen“-Link unnötig sein.

Weiterlesen bei Conformly

Quellen

Dieser Artikel stützt sich auf die am Seitenende genannten offiziellen Quellen.