SkipNav

Diese Dokumentation wird aktuell überarbeitet und befindet sich im Beta-Status. Inhalte können sich noch ändern.

Diese Komponente wird erneut auf Barrierefreiheit getestet. Der vollständige Test steht noch aus und kann erst nach einem abgeschlossenen Release erfolgen.

Synonyme: Skip-Link, Übersprungung, Navigationssprung

Beschreibung: Die SkipNav-Komponente erzeugt eine versteckte Navigation, die es Nutzer:innen mit Tastatur und assistiven Technologien ermöglicht, wiederholte Seitenbereiche zu überspringen und direkt zum Hauptinhalt zu navigieren. Sie ist nur sichtbar, wenn sie durch die Tab-Taste erreicht wird.

Beispiel

Versteckte Navigation mit Link-Labels und Zielankern:

Tab drücken, um die Sprungnavigation anzuzeigen

Links (Label/Href)

<KolSkipNav _label="Versteckte Navigation" _links={[{"_label":"Navigation","_href":"#nav"},{"_label":"Content","_href":"#main"},{"_label":"Contact","_href":"#contact"}]} />

Barrierefreiheit

• Die SkipNav-Komponente ist standardmäßig für Sehende nicht sichtbar und wird nur aktiviert, wenn Tastatur-Nutzer:innen oder Screenreader-Nutzer:innen die Tab-Taste drücken.
• Sie bietet Nutzer:innen mit motorischen Einschränkungen die Möglichkeit, schnell zum Hauptinhalt zu navigieren, ohne wiederholte Navigation durchlaufen zu müssen.
• Für Screenreader-Nutzer:innen wird jeder Link semantisch korrekt ausgezeichnet und kann direkt angesteuert werden.
• Die Verwendung ist besonders wertvoll auf Seiten mit mehreren Navigationsebenen oder wiederholten Inhaltsblöcken.
• Die Link-Labels sollten prägnant und verständlich sein (z. B. „Zum Hauptinhalt", „Zur Navigation").

Links und Referenzen

Verwendung

Tastatursteuerung

Taste	Funktion
Tab	Macht die SkipNav sichtbar und fokussiert den ersten Link.
Tab	Navigiert durch die einzelnen Links der SkipNav.
Enter	Folgt dem fokussierten Link zum angegebenen Zielanker.

Best Practices / Empfehlungen

• Platzieren Sie SkipNav am Anfang der Seite, vor anderen interaktiven Elementen.
• Definieren Sie Link-Labels, die klar beschreiben, wohin der Nutzer navigiert wird (z. B. „Zum Hauptinhalt", „Zur Navigation").
• Verwenden Sie semantisch sinnvolle Zielanker als _href (z. B. #main, #nav, #content).
• Die entsprechenden Ziele sollten mit id-Attributen versehen sein (z. B. <main id="main">).
• SkipNav ist besonders wertvoll auf komplexen Seiten mit vielen Navigations- und Wiederholungselementen.

Anwendungsfälle

• Längere Websites mit umfangreicher Navigation am Anfang
• Multi-Level-Navigationsstrukturen, die viele Tastaturschritte erfordern
• Seiten mit mehreren Seitenleisten oder wiederholten Inhaltsblöcken
• Blogs oder News-Portale mit vielen Navigations- und Filteroptionen
• Barrierefreie Webanwendungen für verschiedene Nutzergruppen

Konstruktion / Technik

Playground

Tab drücken, um die Sprungnavigation anzuzeigen

Links (Label/Href)

<KolSkipNav _label="Versteckte Navigation" _links={[{"_label":"Navigation","_href":"#nav"},{"_label":"Content","_href":"#main"},{"_label":"Contact","_href":"#contact"}]} />

Funktionalitäten (mit Code)

Basis-Navigation

Minimale Konfiguration mit _label und _links:

Tab drücken, um die Sprungnavigation anzuzeigen

Links (Label/Href)

<KolSkipNav _label="Versteckte Navigation" _links={[{"_label":"Navigation","_href":"#nav"},{"_label":"Content","_href":"#main"},{"_label":"Contact","_href":"#contact"}]} />

Link-Struktur

Die _links werden als Array von Objekten mit _label und _href übergeben:

[
 { _label: 'Navigation', _href: '#nav' },
 { _label: 'Hauptinhalt', _href: '#main' },
 { _label: 'Kontakt', _href: '#contact' },
];

Jeder Link zeigt seinen Label an und navigiert zum entsprechenden Zielanker auf der Seite.

API

Overview

The SkipNav component renders a hidden navigation that allows keyboard and assistive technology users to skip repetitive navigation sections and jump directly to the main content. It only becomes visible when reached via the Tab key.

Properties

Property	Attribute	Description	Type	Default
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	string	undefined
_links (required)	_links	Defines the list of links combined with their labels to render.	LinkProps[] | string	undefined

Methods

focus

focus() => Promise<void>

Sets focus on the internal element.

Returns

Type: Promise<void>

---