# Skip-Link: Direkt zum Hauptinhalt springen

Source: https://allyway.ai/de/glossary/skip-link

Ein Skip-Link ist ein Link ganz oben auf der Seite, der direkt zum Hauptinhalt springt. So müssen Tastatur- und Screenreader-Nutzer nicht auf jeder Seite das ganze Menü durchlaufen. Er ist eine ausreichende Technik für WCAG 2.4.1.

Ein Skip-Link ist der erste Link einer Seite, meist mit dem Text „Zum Inhalt springen“. Er bringt Tastatur- und Screenreader-Nutzer an Logo, Menü und Suchleiste vorbei direkt zu dem Inhalt, wegen dem sie gekommen sind. Ohne ihn bedeutet ein Menü mit 40 Links: 40-mal Tab drücken – auf jeder einzelnen Seite.

## Was es bedeutet

Der Sprunglink ist der klassische Weg, [WCAG 2.4.1 Blöcke umgehen](https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html) zu erfüllen – ein Kriterium der Stufe A in [WCAG 2.2](https://allyway.ai/de/regulations/wcag-2-2). Es verlangt einen Mechanismus, um Inhaltsblöcke zu überspringen, die sich auf mehreren Webseiten wiederholen. Typische Blöcke sind Kopfbereich, Hauptnavigation und Werbeflächen. Über [EN 301 549](https://allyway.ai/de/regulations/en-301-549) (Abschnitt 9.2.4.1) gilt die Anforderung auch für das [Barrierefreiheitsstärkungsgesetz](https://allyway.ai/de/regulations/bfsg).

Das W3C nennt, wer profitiert: Screenreader-Nutzer, die nicht mehr auf jeder Seite denselben Kopfbereich hören; Menschen, die auf [Tastaturbedienung](https://allyway.ai/de/glossary/tastaturbedienung) angewiesen sind und mit weniger Tastendrücken ans Ziel kommen; und Nutzer von Bildschirmlupen, die nicht mehr suchen müssen, wo der Inhalt beginnt.

Ein Skip-Link ist nicht der einzige Weg zu 2.4.1. Das W3C nennt mehrere ausreichende Techniken:

| Technik | W3C-Nummer | Was sie leistet |
|---|---|---|
| **Sprunglink zum Hauptinhalt** | G1 | Link oben auf jeder Seite springt zum Inhalt |
| **Link am Anfang eines wiederkehrenden Blocks** | G123 | Springt an das Ende dieses Blocks |
| **Links zu allen Inhaltsbereichen** | G124 | Ein kleines Inhaltsverzeichnis oben |
| **Überschriften am Anfang von Abschnitten** | H69 | Screenreader-Nutzer springen von Überschrift zu Überschrift |
| **Landmarks** | ARIA11 | [ARIA-Landmarks](https://allyway.ai/de/glossary/aria-landmarks) kennzeichnen Kopf, Navigation und Hauptinhalt |

> **Tip:** > **Am besten beides: Skip-Link und Landmarks**
> Landmarks und Überschriften helfen Screenreader-Nutzern. Sehende Tastaturnutzer haben in den meisten Browsern aber keine Taste, um dorthin zu springen. Ein Skip-Link hilft beiden Gruppen.

## Praxisbeispiele

```html title="Beispiel"
<body>
  <a class="skip-link" href="#inhalt">Zum Inhalt springen</a>
  <header>… Logo, Navigation mit 40 Links …</header>
  <main id="inhalt" tabindex="-1">
    <h1>Laufschuhe</h1>
  </main>
</body>

<style>
  .skip-link { position: absolute; left: 8px; top: -100px; }
  .skip-link:focus { top: 8px; background: #ffffff; color: #1a1a1a; padding: 8px 16px; }
</style>
```

Der Link liegt außerhalb des sichtbaren Bereichs, bis er den Fokus erhält, und erscheint dann. `tabindex="-1"` am Ziel sorgt dafür, dass der Browser den Fokus zuverlässig dorthin setzt – der nächste Tab geht im Hauptinhalt weiter.

**Do:** Do

Den Skip-Link als erstes fokussierbares Element einbauen, ihn bei Fokus deutlich zeigen, einen klaren Text wie „Zum Inhalt springen“ verwenden und auf eine `id` verweisen, die auf jeder Seite existiert.

**Don't:** Don't

Den Link mit `display: none` verstecken (dann erhält er keinen Fokus mehr), ihn bei Fokus unsichtbar lassen oder auf ein Ziel verweisen, das eine Vorlage nicht mehr enthält.

Ein versteckter Skip-Link muss bei Fokus sichtbar werden. Sonst drücken sehende Tastaturnutzer Tab und scheinbar passiert nichts – das verstößt zusätzlich gegen den [sichtbaren Fokus](https://allyway.ai/de/glossary/fokus-sichtbar).

## So prüfen Sie einen Skip-Link



## Häufige Fragen

Q: Was ist ein Skip-Link?
A: Ein Link ganz oben auf der Seite, der direkt zum Hauptinhalt springt. Damit überspringen Tastatur- und Screenreader-Nutzer Kopfbereich und Navigation, die sich auf jeder Seite wiederholen.

Q: Ist ein Skip-Link nach WCAG Pflicht?
A: Nicht ausdrücklich. WCAG 2.4.1 Blöcke umgehen verlangt einen Weg, wiederkehrende Blöcke zu überspringen. Der Skip-Link ist die häufigste ausreichende Technik, Überschriften und Landmarks sind weitere. Viele Prüfungen erwarten ihn trotzdem, weil er auch sehenden Tastaturnutzern hilft.

Q: Muss der Skip-Link immer sichtbar sein?
A: Er darf versteckt bleiben, bis er den Fokus erhält – dann muss er deutlich sichtbar werden. Ein Link, der fokussiert, aber unsichtbar ist, verwirrt sehende Tastaturnutzer.

Q: Warum funktioniert mein Skip-Link nicht?
A: Die häufigsten Ursachen: Die Ziel-`id` existiert nicht, der Link ist mit `display: none` versteckt, oder der Fokus springt nicht mit. Gegen Letzteres hilft meist `tabindex="-1"` am Zielelement.

Q: Wie prüfe ich meine Website auf fehlende Skip-Links?
A: Drücken Sie auf jeder Seitenvorlage einmal Tab. Für eine breitere Prüfung von Navigations- und Strukturfehlern nutzen Sie den [kostenlosen WCAG-Scanner](https://allyway.ai/de/free-wcag-accessibility-scanner-for-websites) auf Ihrer Startseite.