Tech
How to Implement Skip Links Correctly
Sarah Dev
Lead Frontend
Read time
4 min
Published
Nov 22, 2025
Imagine having to listen to every link in a major news site's header menu every time you click a new article. Then all the social sharing buttons. Then breadcrumbs. Only then do you reach the text you actually want to read.
For users who navigate with keyboard or screen reader, this is daily reality – if the site lacks skip links. WCAG criterion 2.4.1 'Bypass Blocks' exists to solve exactly this problem.
A skip link is a link placed first in the HTML code, but visually hidden until it receives focus via keyboard. Press Tab on any accessible site and you'll see it appear.
Why skip links are so important
Think about how you yourself use the web. You scroll past the header, click in the main content, and start reading. This interaction takes a fraction of a second.
For a keyboard user, it looks different. Each Tab moves focus to the next interactive element – in order. A typical header might contain:
That's 15+ Tab presses before the user reaches main content. And this repeats on every page load.
Skip links eliminate this by offering a shortcut. A single Tab + Enter takes the user directly to content.
A skip link is the single most important accessibility feature for keyboard users. It takes 5 minutes to implement and dramatically improves the experience.
Step 1: HTML structure
The skip link should be the first focusable element on the page. Place it directly after opening <body> tag:
<body> <a href="#main-content" class="skip-link">Skip to content</a> <header>...</header> <main id="main-content"> <!-- Main content --> </main></body>Important details:
id attribute<main> – Or a wrapper around main contentStep 2: CSS for hidden-but-accessible
The link should be invisible to mouse users but accessible to keyboard. Do NOT use display: none or visibility: hidden – that hides it from screen readers and keyboard too.
Instead, position it off-screen and show it on focus:
.skip-link { position: absolute; top: -40px; left: 0; background: #000; color: #fff; padding: 8px 16px; z-index: 100; text-decoration: none;}.skip-link:focus { top: 0;}When user presses Tab, focus lands on skip link, and CSS :focus shows it visually. Add a transition for smoother effect.
Step 3: JavaScript for better focus handling (optional)
In some browsers (mainly Safari), focus doesn't automatically jump to target element when clicking an anchor link. This can be fixed with JavaScript:
document.querySelector('.skip-link').addEventListener('click', (e) => { const target = document.getElementById('main-content'); if (target) { target.setAttribute('tabindex', '-1'); target.focus(); target.removeAttribute('tabindex'); }});We temporarily add tabindex="-1" to make target focusable, focus it, then remove the attribute. This ensures focus actually moves.
Skip links in Single Page Applications (SPA)
In React, Vue, or Angular apps, pages don't reload on navigation. This creates problems:
1. Focus stays put – After a 'page navigation', focus remains where user last was, not at top of page.
2. Skip link doesn't work – Clicking #main-content does nothing if content already exists on page.
The solution is to handle focus manually on route changes:
<main> or to a new heading (h1) when route changesaria-live to announce page change to screen readersTest your site's accessibility
Free scan, no signup required
