generic-skiplink
WebAIMSkiplinks 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
<generic-skiplink for="main">Continue to main content</generic-skiplink>
<main id="main"></main>
Custom styles:
You can override styles like so:
Show code
<style>
.custom-style::part(anchor) {
background-color: lightgrey;
border: solid 2px blue;
}
</style>
<generic-skiplink for="main" class="custom-style">Go to main content</generic-skiplink>
<main id="main"></main>
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
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@generic-components/components@1.0.0/generic-skiplink/skiplink.css">
<a href="#main" skiplink>Continue to main</a>
Import as JS
Alternatively you can import the skiplink styles as JS string, this can be useful for usage in shadow roots.
Show code
import { skiplink } from '@generic-components/components';
const sheet = new CSSStyleSheet();
sheet.replaceSync(skiplink);
myCustomElement.adoptedStyleSheets = [sheet];