Skip Links

Skip Links sind Sprunglinks, die am Anfang der Seite erscheinen und es Tastaturnutzern ermöglichen, wiederkehrende Bereiche zu überspringen.

Was sind Skip Links?

Skip Links sind unsichtbare Links, die nur sichtbar werden, wenn sie mit der Tastatur fokussiert werden (Tab-Taste). Sie erscheinen am Anfang der Seite und ermöglichen einen direkten Sprung zu wichtigen Bereichen wie Hauptinhalt, Navigation oder Suche.

Standardwerte bei Neuinstallation

Hauptschalter und alle drei Sprunglinks (Hauptinhalt, Navigation, Suche) sind aktiviert.

Sinn und Einsatzmöglichkeiten

• Für Tastaturnutzer: Überspringen von wiederkehrenden Bereichen (z.B. Navigation) ohne mühsames Tabben
• Für Screenreader-Nutzer: Schneller Zugriff auf den Hauptinhalt ohne die gesamte Navigation hören zu müssen
• WCAG-Konformität: Erfüllt WCAG 2.4.1 (Bypass Blocks) – eines der wichtigsten Kriterien für Barrierefreiheit
• Verbesserte UX: Besonders auf Seiten mit umfangreicher Navigation spart es Zeit und Mühe

Relevante WCAG-Kriterien:

• 2.1.1 Tastatur: Die gesamte Funktionalität ist für Tastaturnutzer ausgelegt.
• 2.4.1 Blöcke umgehen: Dies ist das Hauptkriterium für Skip-Links.
• 2.4.7 Fokus sichtbar: Der Skiplink selbst wird beim Fokussieren klar hervorgehoben.

Verfügbare Skip Links

Das Plugin bietet drei vorkonfigurierte Skip Links:

• Zum Hauptinhalt: Sprung zum Hauptinhalt der Seite
• Zur Navigation: Sprung zum Hauptmenü
• Zur Suche: Sprung zum Suchfeld

Jeder Skip Link kann einzeln aktiviert oder deaktiviert werden.

Geführte Einrichtung im Adminbereich

Die Einstellungsseite gruppiert jedes Sprungziel in einer eigenen Karte. Die erste Karte ist standardmäßig geöffnet, weitere Details bleiben bis zur Verwendung kompakt. Für jedes aktive Ziel kannst du den CSS-Selektor gegen die Startseite prüfen. Der Einrichtungsstatus unterscheidet ein eindeutiges Ziel, ein fehlendes Ziel und Selektoren, die mehrere Elemente treffen. Darstellung und erweitertes Verhalten liegen in separaten Aufklappbereichen. Der gestapelte visuelle Editor bündelt Farben, Typografie, Abstände, Ecken, Rahmen und Schatten um genau eine Tastaturvorschau des fokussierten Skip Links.

Konfigurationsmöglichkeiten

Skip Link aktivieren/deaktivieren:

• Hauptfunktion global ein- oder ausschalten
• Jeden einzelnen Skip Link aktivieren/deaktivieren

Skip Link konfigurieren:

• Ziel-Selektor: CSS-Selektor des Zielelements (z.B. #main-content, #menu-main-menu, #s)
• Link-Text: Sichtbarer Text des Links (z.B. „Zum Hauptinhalt“, „Zur Navigation“)
• Titel-Attribut: Zusätzliche Information, die als Tooltip angezeigt wird (optional)

Styling der Skip Links:

• Schriftgröße: CSS-Schriftgröße (z.B. 16px, 1em)
• Schriftstärke: CSS-Schriftstärke (z.B. 600, bold)
• Padding: CSS-Padding (z.B. 15px 23px 14px)
• Hintergrundfarbe: Hintergrundfarbe des fokussierten Links
• Textfarbe: Textfarbe des fokussierten Links
• Border-Radius: Abrundung der Ecken (z.B. 5px)
• Box-Shadow: CSS-Box-Shadow für den Rahmen (z.B. 0 0 2px 2px rgba(0, 0, 0, .6))
• Text-Decoration: Unterstreichung, Überstreichung, Durchstreichung oder keine

Focus-Styling:

• Hintergrundfarbe (Focus): Hintergrundfarbe, wenn der Link fokussiert ist
• Textfarbe (Focus): Textfarbe, wenn der Link fokussiert ist
• Box-Shadow (Focus): CSS-Box-Shadow für den fokussierten Link (oft für äußeren Ring)

Hervorhebungseffekte:

• Hervorhebung aktivieren: Zeigt das Sprungziel kurz farbig hervor
• Hervorhebungsfarbe: RGBA-Farbe für die Hervorhebung
• Hervorhebungseffekt: Keine, Fade, Zoom oder Fade & Zoom
• Scroll-Offset: Abstand vom oberen Rand beim Sprung (in Pixel, Standard: 50px)

Anwendungsbeispiele

Beispiel 1: Standard-Konfiguration

Aktiviere alle drei Skip Links mit den Standard-Zielen. Verwende ein dezentes Styling mit blauem Hintergrund und weißem Text. Setze einen Scroll-Offset von 50px für feste Header.

Beispiel 2: Minimalistisches Design

Verwende nur den Skip Link zum Hauptinhalt. Styling: kleinerer Text, dezente Farben, minimaler Schatten. Ziel: Unaufdringlich, aber funktional.

Beispiel 3: Auffälliges Design

Für bessere Sichtbarkeit: größerer Text, kontrastreiche Farben (z.B. gelber Hintergrund, schwarzer Text), starker Schatten. Ziel: Maximale Sichtbarkeit für alle Nutzer.

Tipps

• Skip Links sollten immer am Anfang der Seite stehen (direkt nach dem <body>-Tag)
• Verwende aussagekräftige Link-Texte, die klar beschreiben, wohin der Sprung führt
• Stelle sicher, dass die Ziel-Selektoren korrekt sind und die Elemente tatsächlich existieren
• Der Scroll-Offset sollte mindestens so groß sein wie die Höhe deines festen Headers
• Teste die Skip Links mit der Tastatur (Tab-Taste), um sicherzustellen, dass sie funktionieren
• Die Skip Links sind standardmäßig unsichtbar und werden nur beim Fokussieren sichtbar – das ist korrekt so
• Verwende kontrastreiche Farben für bessere Sichtbarkeit (WCAG 1.4.3)

Strukturierte Gestaltungseinstellungen

Farben, Typografie, Innenabstand, Eckenradius, Rahmen und Schatten sind in einem visuellen Editor Skip-Link-Design zusammengefasst. Wechsle mit den tastaturbedienbaren Tabs zwischen diesen gleichwertigen Eigenschaften und nutze bei Bedarf Schnellwerte oder exakte verknüpfte beziehungsweise einzelne Werte. Eine einzige zentrale Fokusvorschau zeigt immer den tatsächlich konfigurierten Skip Link und aktualisiert sich sofort. Auf Smartphones bleiben die Tab-Leiste und die Schattenauswahl horizontal scrollbar; die aktive Option wird vollständig eingeblendet, ohne die Seite zu verschieben. Erweiterte CSS-Werte bleiben verfügbar.

Schriftgröße, Innenabstand, Eckenradius und Randbreite werden über strukturierte Wertefelder eingestellt. Bei Innenabstand, Eckenradius und Randbreite kannst du alle Seiten beziehungsweise Ecken verknüpfen oder einzeln bearbeiten. Die Einheit wählst du passend zur Eigenschaft aus.

Für gemischte Einheiten, calc(), clamp() oder andere CSS-Funktionen steht ein erweiterter CSS-Wert zur Verfügung. Schatten bieten die Voreinstellungen Keiner, Dezent, Mittel und Stark. Im benutzerdefinierten Schatteneditor kannst du horizontalen und vertikalen Versatz, Weichzeichnung, Ausbreitung, Farbe mit Transparenz und einen inneren Schatten einstellen. Mehrere Schatten lassen sich im erweiterten CSS-Feld eingeben. Die Vorschau reagiert sofort auf Änderungen.

Technische Details

• Skip Links werden automatisch direkt nach dem <body>-Tag eingefügt
• Sie sind standardmäßig mit CSS versteckt und werden nur beim Fokussieren sichtbar
• Die Hervorhebung des Sprungziels erfolgt automatisch nach dem Sprung
• Die Skip Links funktionieren auch ohne JavaScript (reine HTML/CSS-Lösung)

Verfügbar für: Alle Pläne Free