Core · Navigation
Skip link
Lets keyboard users jump past the header to the main content.
Example
The skip link of this page, which shows when it has the focus.
This page has one: press Tab at the top of the page to see it.
Known issues
None known.
Code
Copy the markup
<body>
<a class="luz-skip-link" href="#main-content">Skip to main content</a>
<header class="o-sticky">…</header>
<main id="main-content" tabindex="-1">…</main>
</body>Variants and options
There are no variants: one class on one link.
| Class | Effect |
|---|---|
.luz-skip-link | Off screen until it has focus, then fixed at the top start corner, in the brand fill, above everything, a sticky bar included. Not printed |
How it works
A normal link to the id of <main>, first in <body>, before a cookie banner, a notice or the header. CSS only.
- It slides in when it receives focus, over
--luz-duration-fast; under reduced motion it appears at once. - The browser does the jump.
tabindex="-1"on<main>lets it take the focus, so the next Tab starts inside it in every browser. - Under a sticky bar (.o-sticky) the page's scroll padding keeps the start of
<main>below the bar after the jump.
Without JavaScript
Nothing changes: the skip link is a link and CSS.
Keyboard and ARIA
Press Tab once from the top of the page and the link appears; Enter follows it to the main content.
- It must be the first focusable element of the page, before a cookie banner or a notice.
- No ARIA: its text is its name.
Contrast and focus are in the Design tab.
Design
When to use
Put a skip link on every page that has a header, a banner or navigation before the main content.
When not to use
Do not rely on it alone: the page still needs landmarks and a logical heading order.
- Do not add a list of skip links to every section: one to the main content is enough.
Do and don't
Writing the content
Say where it goes: "Skip to main content".
- Use the same text on every page.
Contrast and focus
The link is white text on the brand fill, over the page.
| Part | Colour on background | Light | Dark | High contrast | Needs |
|---|---|---|---|---|---|
Link text | --luz-text-on-fill on --luz-brand-fill | 6.0:1 | 4.9:1 | 14.1:1 | 4.5:1 |
Focus ring | --luz-focus-ring on --luz-surface-page | 5.6:1 | 7.7:1 | 21.0:1 | 3:1 |
Measured from the token values of each mode, rounded down. Needs is the WCAG 2.2 AA minimum: 4.5:1 for text, 3:1 for focus rings, borders and icons.
- Focus: the link slides into view when it takes focus, with the link ring, a 2 px
--luz-focus-ringoutline 2 px outside.
Tokens it uses
The 8 tokens that components/skip-link.css reads, by family. Each family links to its page, with the values in every mode. In Figma they are variables with the same names: see Tokens in Figma.
- Spacing and sizing
--luz-space-sm,--luz-space-xs- Radius
--luz-radius-md- Motion
--luz-duration-fast,--luz-easing-enter- Layers
--luz-z-toast
Keyboard and ARIA are in the Code tab.