generic-skiplink

WebAIM

Skiplinks allow users to quickly reach the main content of a page.

API:

name	type
for	string

name	description
default	Provide the text for the skiplink as lightdom

name	description
anchor

Usage:

The skiplink component requires a for="id" attribute, this id should correspond to the id of the element you want to skip to. See the examples for more information.

You can then place the component at the top of your body.

Default:

Try tabbing from the browser URL bar into the page, and the skiplink will show up.

Show code

Custom styles:

You can override styles like so:

Show code

Import as CSS

Alternatively you can import the global CSS file, which allows you to use a skiplink attribute on an anchor tag.

Show code

Import as JS

Alternatively you can import the skiplink styles as JS string, this can be useful for usage in shadow roots.

Show code