jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-Tools

Kostenlose Barrierefreier-Skip-Link-Generator

Generiere einen barrierefreien Skip-Link mit CSS für Tastatur- und Screenreader-Navigation.

Tool wird geladen...

Was ist Barrierefreier-Skip-Link-Generator?

Ein Skip-Link ist ein versteckter Link oben auf der Seite, der sichtbar wird, wenn er mit der Tabulatortaste fokussiert wird. Er ermöglicht Tastatur- und Screenreader-Nutzern, direkt zum Hauptinhalt zu springen und die Navigation zu überspringen. WCAG verlangt eine Möglichkeit, wiederholte Inhaltsblöcke zu umgehen.

Kurze Antwort

Generieren Sie einen zugänglichen Skip-Navigations-Link, der bei Tab-Fokus erscheint und Tastatur- und Screenreader-Nutzern erlaubt, an wiederholten Navigationsblöcken vorbei zum Hauptinhaltsbereich zu springen.

Last updated: 2026-06-11

Einschränkungen

  • Der Skip-Link erfordert, dass das Ziel-Element mit der passenden ID im DOM existiert.
  • Rein visuelles Testen übersieht möglicherweise Fokus-Reihenfolge-Probleme, die die Screenreader-Navigation beeinträchtigen.
  • Skip-Links, die zu nicht fokussierbaren Elementen springen, verschieben den Tastaturfokus möglicherweise nicht korrekt.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Geben Sie den CSS-Selektor des Hauptinhaltsbereichs ein, z.B. #main-content oder #content.
  2. Legen Sie den Link-Text fest, der erscheint, wenn der Skip-Link fokussiert wird.
  3. Wählen Sie, ob der Link immer sichtbar ist oder nur bei Tastaturfokus erscheint.
  4. Kopieren Sie das generierte HTML und CSS in Ihre Seite und testen Sie durch Tabben vom Seitenanfang.

Wofür du es nutzen kannst

  • Skip-Navigation zu einer statischen HTML-Vorlage hinzufügen für bessere Tastaturzugänglichkeit.
  • WCAG 2.4.1 Anforderung zum Umgehen von Blöcken auf Seiten mit persistenter Navigation erfüllen.
  • Tastaturnavigation für eine mehrseitige Dokumentationsseite mit Sidebar verbessern.

Anwendungsfalle

Praxisbeispiele

Beispiel

Blog mit Skip-Link bei Fokus

Eine Blog-Vorlage fügt einen Skip-Link hinzu, der bei Tab-Fokus sichtbar wird und zu <main id="content"> springt.

Beispiel

Dokumentations-Sidebar-Skip

Eine Dokumentationsseite verwendet einen sichtbaren Skip-Link, den Tastaturnutzer aktivieren können, um an der Sidebar-Navigation vorbei zum Hauptartikel zu springen.

Haufige Fehler

  • Den Ziel-Selektor auf ein nicht existierendes oder nicht fokussierbares Element setzen, was den Skip-Link funktionsunfähig macht.
  • Den Link mit display: none verstecken, was ihn auch vor Screenreadern verbirgt.
  • Vergessen, das Ziel-Element mit tabindex="-1" fokussierbar zu machen.

Überprüfung

  1. Laden Sie die Seite und drücken Sie direkt nach dem Laden die Tabulatortaste. Der Skip-Link sollte erscheinen und das erste fokussierbare Element sein.
  2. Aktivieren Sie den Skip-Link und bestätigen Sie, dass der Tastaturfokus zum Hauptinhaltsbereich wechselt.

FAQ

Fragen zu Barrierefreier-Skip-Link-Generator

Sollte der Skip-Link immer sichtbar sein?

Er kann sichtbar-bei-Fokus oder immer sichtbar sein. Beide Methoden sind gültig, solange der Link für Tastaturnutzer zugänglich ist.

Welchen Selektor sollte der Skip-Link ansteuern?

Die ID des Hauptinhaltselements, z.B. #main-content oder #content. Das Ziel-Element sollte tabindex="-1" haben.

Benötigt das Ziel-Element spezielle Attribute?

Ja. Fügen Sie tabindex="-1" hinzu, damit es programmatischen Tastaturfokus empfangen kann. role="region" und ein Label helfen Screenreader-Nutzern.

Kann ich mehr als einen Skip-Link auf einer Seite haben?

Ja, aber halten Sie es begrenzt. Jeder Skip-Link muss einen eindeutigen, beschreibenden sichtbaren Text und eine eindeutige Ziel-ID haben.

Verwandte Tools

Weitere html-tools

Auch ausprobieren

Auch ausprobieren