What is a skip link and do I need one?
A hidden link that lets keyboard users jump past your navigation. Five lines of code, and without it every page starts with the same twenty tab presses.
A skip link is the first focusable element on the page, usually hidden until focused, that jumps straight to the main content. Without one, a keyboard or screen reader user tabs through your entire navigation on every single page before reaching anything new.
The problem
Imagine navigating only with Tab. Every page you open, you press Tab past the logo, then eight navigation links, then a search box, then a theme toggle — before reaching the content. On the next page, all of it again.
That is the daily experience for keyboard users without a skip link. WCAG 2.4.1 exists for exactly this.
The implementation
<body>
<a class="skip-link" href="#content">Skip to content</a>
<header>…navigation…</header>
<main id="content">
…
</main>.skip-link {
position: absolute;
left: -9999px;
top: 0;
padding: 12px 20px;
background: #fff;
color: #000;
z-index: 100;
}
.skip-link:focus {
left: 8px;
top: 8px;
}Three requirements: it must be the first focusable element in the DOM, it must become visible when focused, and its target must exist.
The mistakes
| Mistake | Result |
|---|---|
display: none to hide it | Removed from the tab order entirely. It never works. |
visibility: hidden | Same problem. |
| Not first in the DOM | You tab through part of the navigation before reaching it, defeating the purpose. |
| Invisible when focused | Sighted keyboard users cannot tell where they are. |
| Target ID does not exist | The link does nothing. |
| Target is not focusable | Focus may not move. Add tabindex="-1" to the target if needed. |
The first two are the common ones. display:none and visibility:hidden both remove an element from the tab order, so a skip link hidden that way can never be reached. Use off-screen positioning or clip-path instead.
Beyond the basics
- On pages with a lot of structure, offer more than one: skip to content, skip to search, skip to footer.
- A proper
<main>landmark helps screen reader users jump directly, independently of the skip link. - Never remove focus outlines. If the default is ugly, style it — do not delete it.
A skip link takes five minutes and is one of the highest-value accessibility additions available, precisely because it affects every page.
What our audit reports about this
Every item below is measured directly, not inferred. Run it against your own site and the result names the exact rule or header responsible.
- Whether a skip link exists and whether it is the first focusable element.
- Whether its target exists on the page.
- Whether main, nav, header and footer landmarks are present.
- Whether positive tabindex values are disrupting the natural focus order.
For agents and scripts, the same measurement is at
/api/v1/a11y?url=yoursite.com —
see the API documentation.
Related questions
Does the skip link have to be visible?
Not when unfocused. It must become visible on focus, so sighted keyboard users can see it. Hiding it permanently with display:none removes it from the tab order and makes it useless.
Do I need one if I have landmarks?
Landmarks help screen reader users, who can jump by region. They do not help sighted keyboard users, who have only Tab. Do both.
Where exactly should it go?
As the very first element inside <body>, before anything else focusable — including any cookie banner or announcement bar.
Read next
Is my website accessible? How do I check?
What automated testing can and cannot tell you, the three manual tests worth more than any tool, and where to start on a real backlog.
ReadWhy do my images need alt text?
Because without it, some people get nothing at all — and everything else that reads your page gets nothing either.
ReadWhy is my site not mobile-friendly?
The specific faults that break sites on phones — starting with the viewport tag and the tables nobody tested at 375 pixels.
ReadWhat does a good 404 page need?
The right status code first, then a way out. Most 404 pages fail on the first one and nobody notices.
Read