Einen funktionierenden Skip-Link erstellen
Verknüpfen Sie den Anker mit einem fokussierbaren Ziel.
Einen funktionierenden Skip-Link erstellen ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Die zwei Teile eines Skip-Links
Ein funktionierender Skip-Link besteht aus zwei Teilen: einem Anker, der irgendwohin verweist, und einem Ziel, an dem der Fokus tatsächlich landen kann. Beide müssen vorhanden sein.
Der Ankerteil
Der Anker ist ein normaler Link, dessen href ein Fragment enthält, zum Beispiel ein Hash-Zeichen gefolgt von einer id. Beim Anklicken teilt er dem Browser mit, wohin er springen soll.
<a href="#main">Skip to main content</a>Der Zielteil
Das Ziel ist das Element, das Sie erreichen möchten. Geben Sie ihm eine passende id, damit das Fragment im href darauf verweisen kann.
<main id="main"> ... </main>main ist das natürliche Ziel
Richten Sie Ihren Skip-Link auf die main-Landmark. Sie ist der einzige Bereich, der den einzigartigen Inhalt der Seite enthält – genau der Ort, an dem Benutzer landen möchten.
Anklicken reicht nicht aus
Ein häufiger Stolperstein bei älteren Lösungen: Der Link scrollt die Seite, aber der Fokus bleibt auf dem Link. Mit dem nächsten Tab gelangt der Benutzer direkt zurück in die Navigation.
Das Ziel fokussierbar machen
Die Lösung besteht darin, den Fokus tatsächlich dorthin verschieben zu lassen. Fügen Sie tabindex gleich minus eins hinzu, damit das Ziel den Fokus vom Skip-Link empfangen kann.
<main id="main" tabindex="-1"> ... </main>Warum minus eins und nicht null
Minus eins bedeutet: über Skripte und als Linkziel fokussierbar, aber nicht in der Tab-Reihenfolge. So wird das Element nicht für alle anderen zu einem zusätzlichen Tab-Stopp.
Moderne Browser helfen
Die meisten modernen Browser verschieben den Fokus heute automatisch zum Fragmentziel. Mit tabindex minus eins stellen Sie jedoch sicher, dass es überall funktioniert – behalten Sie diese Angabe daher bei.
Mit Gehör und Augen testen
Laden Sie die Seite neu, drücken Sie einmal Tab und anschließend die Eingabetaste. Die Fokusanzeige sollte zum Inhalt springen, und der nächste Tab sollte innerhalb des Inhalts fortfahren. ✅
Der Text muss eindeutig sein
Beschriften Sie den Link eindeutig. Zum Hauptinhalt springen sagt dem Benutzer genau, was geschieht – deutlich besser als ein vages „Überspringen“ oder ein Symbol.
Die Reihenfolge auf der Seite
Platzieren Sie den Anker als erstes Kindelement von body, vor der Kopfzeile, damit Tab ihn vor allen anderen Elementen der Seite erreicht.
Kurze Überprüfung
Was ermöglicht es dem Fokus, tatsächlich auf dem main-Bereich zu landen?
Zusammenfassung
Verknüpfen Sie einen Anker mit einer passenden id auf main, fügen Sie tabindex minus eins hinzu und testen Sie die Funktion mit der Tab-Taste. So funktioniert ein Skip-Link wirklich. 🎯
Häufig gestellte Fragen
Ist die Lektion „Einen funktionierenden Skip-Link erstellen“ kostenlos?
Ja — der vollständige Text von „Einen funktionierenden Skip-Link erstellen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Einen funktionierenden Skip-Link erstellen“?
Verknüpfen Sie den Anker mit einem fokussierbaren Ziel. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Einen funktionierenden Skip-Link erstellen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Warum es „Zum Hauptinhalt springen“ gibt
- Einen funktionierenden Skip-Link erstellen
- Bis zum Fokus visuell verborgen
- Mehrere Überspringen-Links für große Seiten