SkipLink
The page’s first link, invisible until the keyboard reaches it: it goes straight to the content, skipping the navigation.
On this page
Playground
Background
<a class="feitio-skip-link" style="position: static; translate: none" href="#playground">Skip to content</a>When to use
- On every page with navigation before the content, which is almost all. AppShell and DocPage already include it.
When not to use
- On a page with nothing before the content.
Examples
Skip to content
How it appears
Press Tab right after opening this page: "Skip to content" shows up in the corner, as lifted paper. Below, it is drawn open.
Show code
<a class="feitio-skip-link" href="#conteudo">Pular para o conteúdo</a>
…
<main id="conteudo" tabindex="-1">…</main>Accessibility
- It must be the first focusable element, and its target (
main) must accept focus (tabindex="-1"). - It appears on focus; it is never hidden for good.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-skip-link" | required | Hidden until the keyboard arrives; appears as lifted paper. |
href | "#conteudo" | The id of the main content. |
tabindex="-1" | on the <main> | The target accepts focus. |