What is a skip link — the hidden link that saves 40 Tab presses
Open any page on GOV.UK, click the address bar and press Tab. A "Skip to main content" link appears in the top-left corner. A second ago it wasn't there.
Nobody forgot to hide it — it's hidden on purpose. It's a link for people who move around the site with a keyboard. The UK government's design system requires it on every GOV.UK page.
Why? W3C gives an example: without such a link, a keyboard user has to Tab through about 40 links before reaching the main content. On every page. On every visit.
What a skip link is
A skip link is a "Skip to main content" link. It sits at the very start of the page and points to the page's main part. It's usually hidden and only shows up when keyboard focus lands on it.
Nobody uses it with a mouse: your eyes find where the article starts instantly. But the keyboard goes strictly in order — logo, menu items, search, cart, language switcher. All of that comes before the content and repeats on every page.
A skip link is a shortcut past that whole queue. One Enter — and you're in the text.
Who needs it
The first thing that comes to mind is blind users. But here's the surprise.
Screen readers have their own quick jumps: by headings and by page regions. A screen reader user will usually jump straight to the main block even without a skip link.
A sighted keyboard user, though, has no such jumps. WebAIM, one of the leading web accessibility organizations, says it directly: a link that's permanently hidden or tiny doesn't help the very people who need it most — sighted keyboard users.
Who they are:
- people with motor disabilities. Some press keys with a mouth stick or control the computer with a single switch. Every extra key press is real effort;
- people with a broken arm or a tremor, for whom a mouse is awkward;
- people who simply prefer working from the keyboard.
For each of them, a skip link saves dozens of key presses on every page.
In the WCAG accessibility standard this is success criterion 2.4.1 "Bypass Blocks". Its level is A, the most basic one.
How to build a skip link
It works on any site — plain HTML or React: it's just a regular link. You need three things: the link first inside <body>, an id on the main block, and CSS that hides the link until it's focused.
<body>
<a class="skip-link" href="#main">Skip to main content</a>
<header>…logo, menu, search…</header>
<main id="main">
<h1>Page title</h1>
</main>
</body>
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 16px;
top: 16px;
padding: 12px 16px;
background: #fff;
color: #000;
}
The link moves far past the left edge of the screen but stays in the Tab order. Once it gets focus, it slides into view.
The three most common mistakes:
- Hiding it with
display: noneor thehiddenattribute. That removes the link from the Tab order too. It looks tidy and works for nobody. - Not putting it first. If a menu or a logo link comes before it, the point is lost. GOV.UK makes one exception: the cookie banner comes first, and the skip link right after it.
- Mismatching the
id. The link sayshref="#main", but the block hasid="content". Enter gets pressed, nothing happens.
And one more rule from GOV.UK: don't wrap the skip link in <nav> and don't tuck it inside the header.
What to write. WebAIM compares the options — "Skip navigation", "Skip main navigation", "Skip to main content" — and recommends the last one. It says where you'll end up, not what you're skipping. That's clearer.
Make it stand out. If someone tabs quickly, the link flashes for a fraction of a second. So make it large and high-contrast, not grey text in a corner. WebAIM even suggests a gentle animation so the link stays on screen a little longer.
How to test it in ten seconds
- Open the page and click the address bar.
- Press Tab once. The first thing to appear should be the "Skip to main content" link — visible and high-contrast.
- Press Enter.
- Press Tab again. Focus should land on the first link or button inside the content, not on a menu item.
- Repeat on an inner page. The link should live in the site's shared template, not just on the home page. In React or Next.js it belongs in the root layout, next to the header.
Passed — done. Add this check to your pre-launch checklist: it takes under a minute and finds a hole you'd never notice with a mouse.
Short story-lessons, an agent simulator and daily practice — in our mobile app. Free.
Do I need a skip link if the page has <main> and headings?
Under WCAG that can be enough: the standard accepts those methods too. But they mostly help screen reader users. A sighted keyboard user still needs the actual link.
How many skip links should a page have?
Usually one is enough. WebAIM warns that lots of them turn into a queue of their own that people have to get through.
Does a landing page need one?
If there are only a couple of links before the content, you can skip it. But on a landing page with a five- or six-item menu it already saves key presses, and it costs about ten lines of code.
Read next
What is a git worktree — and why keep a second folder of the same project
What is state — and why a button doesn't "turn" grey
What is a regression — and why a fixed bug comes back
What is a dependency — and why one library pulls in two hundred
What is a variable — and why a copy of a list changes together with the original
