SkipNav
#SkipNav
A hidden navigation can be created using the SkipNav component. It is used to enable visually impaired people to skip over side areas. It only becomes visible after clicking the Tab key.
Construction
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>
Example
To see the SkipNav, click on this text and then go one step further with the Tab key.
Usage
The SkipNav is created by passing a JSON object that is responsible for rendering the hidden links.
[
{ _label: 'Navigation', _href: '#nav' },
{ _label: 'Inhalt', _href: '#main' },
{ _label: 'Kontakt', _href: '#kontakt' },
{ _label: 'Links', _href: '#links' },
];
Keyboard controls
| button | Function |
|---|---|
Tab | Focuses the SkipNav and allows you to scroll through the menu items. |
Enter | Calls the link of the focused menu item. |
Links and references
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>