07
Words
Always “Skip to content”.
Navigation
Skip link
The first thing on every page: one link that jumps keyboard and screen reader users past everything to the content.
01
Examples
Phone 390 · Light
Phone 390 · Dark
02
When to use it
Every page, first element in the body, pointing at #main. main starts at the band, so the reader lands on the title.
Live: Every page.
03
Anatomy
- Link
a.skip, “Skip to content”, hidden above the viewport until it receives focus.
04
States
- Hidden
- Placed at top -100px, off screen.
- Focus
- Placed at top 20px, left 20px (no animation). Ink ground, canvas text, 15/24.
05
Behaviour
- Phone, tablet, desktop
- Same at every width.
- Motion
- None.
06
Accessibility
Must be the first focusable element. Never remove it. The target main must carry id="main".
08
Code
Classes: .skip. Styles in site/assets/css/site.css.
<a class="skip" href="#main">Skip to content</a>