Tutorial
So baust du einen Skip-Link
Kurz gesagt
Ein Skip-Link ist der erste fokussierbare Link auf der Seite und zeigt per Anker auf das id des Hauptinhalts. Verstecke ihn nicht mit display:none (das macht ihn unfokussierbar), sondern schiebe ihn aus dem Blickfeld und blende ihn bei :focus wieder ein. Das Sprungziel braucht ein id und tabindex="-1", damit der Fokus dort ankommt.
In Kürze
Skip-Link ganz nach oben
Setze als erstes Element im <body> einen Link mit href="#main-content".
Sprungziel markieren
Gib dem <main> die id="main-content" und tabindex="-1".
Bei Fokus sichtbar machen
Verstecke den Link visuell (nicht mit display:none) und blende ihn bei :focus ein.
Testen
Lade die Seite, drücke einmal Tab: Der Skip-Link muss sichtbar werden und funktionieren.
Auf jeder Seite stehen vor dem eigentlichen Inhalt dieselben Blöcke: Logo, Hauptnavigation, oft eine Suche. Wer eine Tastatur oder einen Screenreader nutzt, müsste sich das auf jeder Unterseite neu durchtabben. Ein Skip-Link überspringt diese Blöcke mit einem Tastendruck: Das ist der einfachste Weg, 2.4.1 (Blöcke umgehen) zu erfüllen.
Das Problem
<body>
<!-- Kein Skip-Link: Tastaturnutzer muessen sich durch die ganze
Navigation tabben, auf jeder Seite neu -->
<header>
<nav><!-- 30 Menuepunkte --></nav>
</header>
<main>
<!-- Inhalt -->
</main>
</body>
/* Oder: ein Skip-Link, der per display:none unfokussierbar ist */
.skip-link { display: none; }Zwei Varianten scheitern: gar kein Skip-Link, oder ein Skip-Link mit display:none. display:none nimmt das Element aus der Tab-Reihenfolge, es kann also nie den Fokus bekommen und ist damit nutzlos.
Die Lösung
Der Link ist das erste fokussierbare Element im body und zeigt auf das id des Hauptinhalts. Sichtbar wird er erst bei Fokus.
<body>
<a class="skip-link" href="#main-content">Zum Inhalt springen</a>
<header>
<nav><!-- 30 Menuepunkte --></nav>
</header>
<!-- tabindex="-1" macht das Ziel per Skript/Anker fokussierbar,
ohne es in die Tab-Reihenfolge aufzunehmen -->
<main id="main-content" tabindex="-1">
<!-- Inhalt -->
</main>
</body>/* Sichtbar erst bei Fokus: aus dem Blickfeld geschoben,
aber im DOM und in der Tab-Reihenfolge (nicht display:none!) */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
padding: 0.75rem 1rem;
background: #1d4ed8;
color: #ffffff;
}
.skip-link:focus {
left: 0.5rem;
top: 0.5rem;
z-index: 1000;
}Details, die oft übersehen werden
- Nutze nicht left: -9999px allein, wenn der Link RTL-Sprachen unterstützen soll: dann eher die clip-path- oder sr-only-Technik. Für LTR ist die gezeigte Variante robust.
- Der Skip-Link muss echten Kontrast haben, sobald er sichtbar ist (1.4.3): weisser Text auf Blau erfüllt das.
- Ein einziger Skip-Link zum Hauptinhalt reicht für 2.4.1. Bei sehr komplexen Seiten kannst du weitere anbieten (z. B. "Zur Suche").
Testen
- Lade die Seite neu und drücke genau einmal Tab.
- Der Skip-Link muss sichtbar erscheinen (nicht verborgen bleiben).
- Enter drücken: Der Fokus muss in den Hauptinhalt springen, nicht nur der Scroll.
Zugehörige WCAG-Kriterien
Häufige Fragen
- Warum nicht einfach display:none für den Skip-Link?
- display:none und visibility:hidden entfernen das Element aus der Tab-Reihenfolge. Der Link kann dann nie den Fokus bekommen und ist wirkungslos. Nutze eine visuelle Versteck-Technik, die das Element im DOM und fokussierbar lässt.
- Braucht das Sprungziel wirklich tabindex="-1"?
- Ja, in der Praxis schon. Ohne tabindex bewegen einige Browser nur den Scroll, nicht den Tastatur-Fokus. tabindex="-1" macht das Ziel per Skript/Anker fokussierbar, ohne es in die normale Tab-Reihenfolge aufzunehmen.
- Wohin soll der Skip-Link springen?
- Auf den Beginn des Hauptinhalts, üblicherweise das <main>-Element mit einer id wie main-content. So werden Header und Navigation übersprungen.
Kostenlosen Scan anfragen
Sagen Sie uns Ihre Domain — wir führen einen kostenlosen Erst-Scan durch und zeigen Ihnen die wichtigsten Barrieren.