Components · Actions
Skip Link
The first focusable element on every page. It lets a keyboard user jump past the header and navigation straight to the content — and it is a WCAG requirement, not a nicety.
Figma source: Skip Link ↗Try it
The skip link is invisible until it receives focus. This page has a real one: press Tab once from the top of the document and it appears in the upper-left corner.
<!-- First element inside <body>, before the header -->
<a class="cds-skip-link" href="#main-content">Skip to main content</a>
<header>…</header>
<main id="main-content" tabindex="-1">…</main>Usage
The Figma annotations set out two requirements, and both are load-bearing:
- Required: the destination is set by the
<main>element. Give it anidand point the link at it. - Optional: the label may name the product — “Skip to Sponsored Projects content” — where a page hosts more than one product’s navigation.
When to use it
- Place it as the very first focusable element in the document, before the header.
- Point it at
<main>, and give that elementtabindex="-1"so focus can actually land on it. - Let it become visible on focus — a permanently hidden skip link fails SC 2.4.1.
- Include one on every page, including modals-as-pages and login.
When not to use it
- Do not hide it with
display:noneorvisibility:hidden— that removes it from the tab order entirely. - Do not point it at a wrapper that contains the navigation you were trying to skip.
- Do not add several skip links unless the page genuinely has several large blocks worth skipping.
Following a fragment link moves the browser’s scroll position, but in several
browsers it does not move keyboard focus unless the target can receive it. Without
tabindex="-1" on <main>, the user is scrolled to the
content while their focus stays in the header — the next Tab drops them back into the
navigation they just skipped, which is worse than having no skip link at all.
Tokens consumed
| Token | Applied to | Resolves to |
|---|---|---|
--primary-brand-color | Background when visible | #0076b6 |
--color-white | Label | #ffffff |
--radius-3 | Corner radius | 3px |