Component
SkipLink
The first focusable element on a page: jumps keyboard users past repeated navigation.
import { SkipLink } from '@loidolt/theme-svelte';
Example
Skip to main content
Activating the link moves focus here, so the next Tab continues from this paragraph.
Notes
- Hidden until focused. Place it first in
<body>, before the top bar. - Activation also moves focus to the target (adding
tabindex="-1"when it is not focusable), so the next Tab continues from the content rather than the top of the page.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
targetId required | string | — | Id of the element to skip to — usually <main>. |
children | Snippet | — | |
class | string | — | |
label | string | 'Skip to main content' | Link text, when children is not given. |
ref bindable | HTMLAnchorElement | null | null |
Plus the attributes of Omit<HTMLAnchorAttributes, 'href'>, forwarded to the root element.