Imagine you are a screen reader user visiting a website. Every time you land on a page, you have to tab through the entire navigation menu before you can reach the main content. That is exhausting. Skip navigation links fix this by giving keyboard users a way to jump directly to the main content.
How Skip Links Work
A skip link is the very first focusable element on the page — usually a link right at the top that points to an anchor in the main content area. It is often visually hidden until the user presses Tab, at which point it appears so they can click it or press Enter to skip straight to the content.
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/services">Services</a>
</nav>
<main id="main-content" tabindex="-1">
<h1>Welcome to Our Site</h1>
<p>This is the main content area.</p>
</main>
</body>
Styling the Skip Link
The skip link is hidden off-screen by default and slides into view when it receives focus. This keeps it invisible to sighted users who do not need it, while making it available to keyboard users who do.
<style>
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px 16px;
z-index: 1000;
text-decoration: none;
}
.skip-link:focus {
top: 0;
}
</style>
Why tabindex="-1" Matters on the Target
The target element (like <main>) needs tabindex="-1" so it can receive focus programmatically when the skip link is activated. Without this, the focus would jump to the next focusable element inside the target instead of to the target itself.
<!-- The tabindex="-1" allows the main element to receive focus -->
<main id="main-content" tabindex="-1">
<h1>Page Title</h1>
<p>Content starts here...</p>
</main>
Multiple Skip Links
On complex pages, you can offer multiple skip links — one for the main content, another for a sidebar, another for the footer, and so on. This gives keyboard users the same navigation flexibility that sighted users get by simply looking at the page layout.
<a href="#main-content" class="skip-link">Skip to main content</a>
<a href="#sidebar" class="skip-link">Skip to sidebar</a>
<a href="#footer" class="skip-link">Skip to footer</a>
<nav>...</nav>
<main id="main-content" tabindex="-1">...</main>
<aside id="sidebar" tabindex="-1">...</aside>
<footer id="footer" tabindex="-1">...</footer>