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
_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_aria-label[DEPRECATED] use _label instead

Deprecated: Setzt die semantische Beschriftung der Komponente.
string | undefinedundefined
_label_labelDefines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).string | undefinedundefined
_links (required)_linksDefines the list of links combined with their labels to render.LinkProps[] | stringundefined

Dependencies

Depends on

  • kol-link-wc

Graph


Live-Editor

Beispiele