Ein „Skip to Content“-Link ist ein unsichtbarer Sprunglink, der beim Fokus per Tastatur sichtbar wird. Er erlaubt es Nutzerinnen und Nutzern – insbesondere mit Tastatur oder Screenreader –, die Hauptnavigation zu überspringen und direkt zum Seiteninhalt zu springen.
Warum ist der Link so wichtig?
Gerade bei umfangreichen Menüs kann das manuelle Durchtabben mühsam sein. Der „Skip to Content“-Link spart Zeit, reduziert Frust und ist ein wichtiger Beitrag zur Tastaturbedienbarkeit und Barrierefreiheit.
Er ist besonders wichtig für:
- Nutzer mit motorischen Einschränkungen
- Menschen mit Sehbehinderung
- Mobile Nutzer mit externer Tastatur
Beispielhafte Umsetzung
htmlKopierenBearbeiten<a href="#main-content" class="skip-link">Direkt zum Inhalt springen</a>
Per CSS lässt sich der Link nur bei Fokus einblenden, z. B.:
cssKopierenBearbeiten.skip-link {
position: absolute;
top: -40px;
left: 0;
}
.skip-link:focus {
top: 0;
}
Der Klicklounge-Tipp: Platzieren Sie den Skip-Link als erstes Element im Body-Tag Ihrer Seite – vor Header oder Navigation. Testen Sie ihn mit der Tabulatortaste und schauen Sie, ob der Sprung zuverlässig funktioniert.