Skip to main content

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
_aria-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

TasteFunktion
TabFokussiert die SkipNav und ermöglicht das Durchlaufen der Menüpunkte.
EnterRuft den Link des fokussierten Menüpunkts auf.

Properties

PropertyAttributeDescriptionTypeDefault
_ariaLabel (required)_aria-labelGibt den Text an, der die Navigation von anderen Navigationen differenziert.stringundefined
_links (required)_linksSetzt die Liste der darzustellenden Links.LinkProps[] | stringundefined

Dependencies

Depends on

Graph


Live-Editor

Beispiele