SkipNav
Mit Hilfe der SkipNav-Komponente kann eine versteckte Navigation erzeugt werden. Sie dient dazu, Sehbehinderten das Überspringen von Seitenbereichen zu ermöglichen. Sie wird nur nach Anspringen durch die Tab-Taste sichtbar.
Konstruktion
Code
<kol-skip-nav
_label="Ein versteckter Link"
_links="[{'_label':'Navigation','_href':'#nav'},{'_label':'Inhalt','_href':'#main'},{'_label':'Kontakt','_href':'#kontakt'},{'_label':'Links','_href':'#links'}]"
></kol-skip-nav>
Beispiel
Um die SkipNav sehen zu können, klicken Sie auf diesen Text und gehen dann mit der Tab-Taste einen Schritt weiter.
Verwendung
Die SkipNav wird durch Übergabe eines JSON-Objekts erzeugt, das für das Rendern der versteckten Links zuständig ist.
[
{ _label: 'Navigation', _href: '#nav' },
{ _label: 'Inhalt', _href: '#main' },
{ _label: 'Kontakt', _href: '#kontakt' },
{ _label: 'Links', _href: '#links' },
];
Tastatursteuerung
| Taste | Funktion |
|---|---|
Tab | Fokussiert die SkipNav und ermöglicht das Durchlaufen der Menüpunkte. |
Enter | Ruft den Link des fokussierten Menüpunkts auf. |
Links und Referenzen
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>