Skip Navigation Links: What They Are and How to Add Them
Try something right now. Open any website, press the Tab key, and see what happens. On most sites, you'll have to tab through the entire logo, navigation menu, and sidebar before you reach the actual content. If you're a sighted mouse user, that's not a problem. You just scroll down. But if you're navigating with a keyboard, you're stuck pressing Tab dozens of times on every single page.
That's the problem skip navigation links solve. They're one of the simplest accessibility features you can add to a website, and they make a massive difference for keyboard users, screen reader users, and people with motor impairments. I've scanned thousands of sites with our free accessibility scanner, and a missing or broken skip link is one of the most common issues I see.
In this article, I'll walk you through exactly what skip links are, why they matter, and how to build them properly with HTML and CSS. You'll also get code you can copy and paste into your own projects.
In This Article
What Are Skip Navigation Links?
A skip navigation link (often called a "skip link" or "skip nav") is a hidden link placed at the very top of a web page. When a keyboard user presses Tab, the skip link is the first thing that receives focus. It typically says something like "Skip to main content" and, when activated, jumps the user's focus past the repeated header and navigation and directly to the page's main content area.
The concept comes directly from WCAG 2.2 Success Criterion 2.4.1: "Bypass Blocks." This criterion requires that you provide a mechanism for users to skip over content that's repeated across multiple pages. Your site navigation appears on every page, and without a skip link, keyboard users have to tab through every single nav item before they can interact with the content they came to see.
Think about it this way: if your navigation has 15 links, that's 15 Tab presses on every page load. If someone is browsing five pages on your site, that's 75 unnecessary keystrokes just to get past the menu. For a user with a motor impairment who uses a head switch or sip-and-puff device, each of those "tabs" can require significant physical effort.
Why They Matter
Keyboard Users
Not everyone uses a mouse. Some people rely entirely on the keyboard to navigate websites, whether due to a motor disability, a repetitive strain injury, or personal preference. Keyboard users move through interactive elements using the Tab key, and without a skip link, they're forced to tab through the entire navigation on every page. That's tedious at best and physically painful at worst.
Screen Reader Users
Screen readers announce every element as the user navigates through the page. Imagine hearing "Home, link. About, link. Services, link. Portfolio, link. Blog, link. Contact, link." at the top of every single page. Screen reader users have shortcuts to jump by headings or landmarks, but skip links provide an additional, reliable way to jump straight to the content. It's the first thing the screen reader encounters, which makes it predictable and easy to use. For more on how screen readers work and how to test with them, see our screen reader testing guide.
Motor Impairments
People who use switch devices, eye-tracking systems, or voice control software often navigate sequentially through page elements. Each additional element they have to pass through costs time and effort. A skip link drastically reduces the number of interactions needed to reach the main content. For users with severe motor impairments, this isn't a minor convenience. It's the difference between a usable site and an unusable one.
How to Implement a Basic Skip Link
The HTML for a skip link is remarkably simple. You need two things: an anchor link at the top of the page and a target element with a matching id attribute.
Here's the basic structure:
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main id="main-content">
<h1>Page Title</h1>
<p>Your content goes here...</p>
</main>
</body>That's it. The <a href="#main-content"> link points to the <main id="main-content"> element. When a user activates the link, the browser jumps focus to that element. The skip link should be the very first element inside <body>, before any other content.
A few important details. The id on the target element must match the fragment identifier in the link's href (minus the #). Use a <main> element as your target when possible, since it has semantic meaning. If you can't use <main>, any block-level element with an id works. Some older browsers have quirks with focus management on non-interactive elements, so you might need to add tabindex="-1" to the target:
<main id="main-content" tabindex="-1">
<h1>Page Title</h1>
...
</main>The tabindex="-1" makes the element programmatically focusable (so the skip link can move focus to it) without adding it to the normal tab order. This is a good practice for backward compatibility.
Making Skip Links Visible on Focus
Skip links are typically hidden from sighted users until they press Tab. The standard pattern is to position the link off-screen, then bring it into view when it receives keyboard focus. Here's the CSS:
.skip-link {
position: absolute;
top: -100%;
left: 0;
background: #1a1a2e;
color: #ffffff;
padding: 12px 24px;
z-index: 1000;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
border-radius: 0 0 4px 0;
}
.skip-link:focus {
top: 0;
}When the link isn't focused, top: -100% moves it above the viewport. When the user presses Tab and the link receives focus, top: 0 slides it into view at the top-left corner of the screen. The high z-index ensures it appears above all other content, including sticky headers.
There are a few things to avoid here. Don't use display: none or visibility: hidden to hide the skip link. Both of those remove the element from the accessibility tree, which means screen readers won't find it and keyboard users can't tab to it. The whole point is that it should be focusable but not visible until focused.
Also avoid clip or clip-path techniques for hiding the link unless you're certain the element is still focusable. The position: absolute with off-screen placement approach is the most reliable pattern across all browsers and assistive technologies.
Multiple Skip Links
Some pages have more than one major content area. A search-heavy site might benefit from a "Skip to search" link. A documentation site might have a "Skip to sidebar navigation" link. You can add multiple skip links, but keep it practical. Two or three at most.
<body>
<div class="skip-links">
<a href="#main-content" class="skip-link">Skip to main content</a>
<a href="#search" class="skip-link">Skip to search</a>
<a href="#footer-nav" class="skip-link">Skip to footer</a>
</div>
<header>...</header>
<main id="main-content">...</main>
<aside>
<form id="search" role="search">...</form>
</aside>
<footer id="footer-nav">...</footer>
</body>Each skip link targets a different section of the page. The user tabs through them in order, picking the one they want, and then presses Enter. The CSS is the same as before: hidden off-screen by default, visible on focus.
A word of caution: don't go overboard. If you have six skip links, you've just recreated the problem you were trying to solve. The user still has to tab through a bunch of links before reaching the content. One skip link is enough for most sites. Two or three is fine for complex layouts. More than that, and you should reconsider your page structure instead.
Check Your Skip Links Right Now
Run a free accessibility scan on your site. The report will flag missing skip links, broken anchor targets, and other keyboard navigation issues in under 60 seconds.
Skip Links in Single-Page Applications
Skip links get tricky in single-page applications (SPAs) built with React, Vue, Angular, or similar frameworks. The problem is that SPAs don't do traditional page loads. When a user navigates to a new "page," the URL changes and the content updates, but the browser doesn't reload. That means focus stays wherever it was before the route change, and the skip link doesn't reset to its natural position in the tab order.
Here's what you need to do in a SPA:
- Keep the skip link in your root layout so it's always present, regardless of which route is active.
- Manage focus on route changes. After the new content renders, programmatically move focus to the main content area or the page heading. This resets the tab order so the user starts at the top of the new content.
- Use an
aria-liveregion or announce the page change to screen readers so they know something happened.
Here's a simplified React example:
// In your route change handler or useEffect
useEffect(() => {
const mainContent = document.getElementById('main-content');
if (mainContent) {
mainContent.focus();
}
}, [location.pathname]);And make sure your target element has tabindex="-1" so it can receive focus programmatically:
<main id="main-content" tabindex="-1">
{children}
</main>Without this focus management, keyboard users in a SPA will find that pressing Tab after a route change takes them through the entire header navigation again, which defeats the purpose of having a skip link. This is one of the most common keyboard accessibility failures in modern web apps.
Testing Your Skip Links
Testing a skip link takes about 30 seconds. Here's how to do it.
Keyboard Testing
- Open your page in a browser.
- Click in the browser's address bar (to make sure no page element has focus).
- Press Tab once. You should see the skip link appear, usually at the top-left corner of the page.
- Press Enter. Focus should jump to the main content area. You should be able to verify this by pressing Tab again: the next element to receive focus should be the first interactive element inside the main content, not something in the header.
- Press Tab one more time. If focus goes to a navigation link instead of something in the content area, your skip link target is broken.
Screen Reader Testing
Turn on VoiceOver (Cmd+F5 on Mac) or NVDA (free on Windows). Navigate to your page and press Tab. The screen reader should announce something like "Skip to main content, link." Press Enter and verify that the screen reader now reads the main content area. Check out our screen reader testing guide for more detailed instructions.
Automated Testing
Run your site through our free accessibility scanner. It uses axe-core, which checks for the presence of a skip link and verifies that the target element exists. If your skip link points to an id that doesn't exist on the page, the scanner will flag it.
You can also use the browser's developer tools. Right-click the skip link, choose "Inspect," and verify that the href value matches an existing id on the page. Click the skip link and check that the browser's URL changes to include the fragment (e.g., #main-content).
Common Mistakes
I've seen all of these in the wild. Here's what goes wrong and how to fix it.
Broken Anchor Targets
The skip link points to #main-content, but there's no element with id="main-content" on the page. This happens when someone redesigns a page and forgets to add the id to the new markup. The link does nothing, and keyboard users are stuck. Always verify that the target id exists. This is one of those common accessibility mistakes that's easy to catch if you know to look for it.
Permanently Hidden Skip Links
Using display: none or visibility: hidden on the skip link hides it from everyone, including keyboard users and screen readers. The link needs to be visually hidden but still present in the accessibility tree and the tab order. Use the off-screen positioning technique shown earlier, not display: none.
Wrong Z-Index
The skip link appears on focus, but it's hidden behind a sticky header, a hero image, or a modal overlay. Set a high z-index (1000 or higher) on the skip link to make sure it always appears above other content. Also make sure the skip link has a solid background color so text doesn't overlap with content underneath.
Skip Link After the Navigation
I've seen sites where the skip link is placed after the header or inside the navigation. That misses the point entirely. The skip link needs to be the first focusable element on the page, before the header, before the nav, before everything. If it's not first, users still have to tab through other elements to reach it.
No Visible Focus Indicator
The skip link appears when focused, but the default browser focus outline has been removed (often by a blanket outline: none rule). Sighted keyboard users can't see the link, so they don't know it's there. Make sure your skip link has clear, visible focus styles. A solid background color with white text works well.
Skip Link on Some Pages, Not Others
If your site uses templates or layouts, the skip link should be in the shared layout file so it appears on every page. I often see sites where the homepage has a skip link but interior pages don't, because different templates were used. Consistency matters. Keyboard users expect the skip link to be there every time.
Platform-Specific Tips
WordPress
Most themes tagged "accessibility-ready" in the WordPress theme directory include a skip link by default. If your theme doesn't have one, the WP Accessibility plugin by Joe Dolson can add a skip link automatically without any code changes. It also handles the CSS for you. For a full walkthrough of WordPress accessibility, including theme selection and plugin recommendations, check out our WordPress ADA compliance guide.
If you want to add a skip link manually in WordPress, put it right after the opening <body> tag in your theme's header.php file:
<body <?php body_class(); ?>>
<a href="#main-content" class="skip-link screen-reader-text">
Skip to content
</a>
<!-- rest of header -->Then make sure your main content area (usually in page.php, single.php, and index.php) has the matching id:
<main id="main-content" class="site-main">
<!-- page content -->
</main>Shopify
Shopify's default themes (Dawn, Refresh) include a skip link. If you're using an older or custom theme, you'll need to add one yourself. Edit your theme.liquid file and add the skip link right after the opening <body> tag. Make sure the target id exists on your main-content element in the main content section of the layout.
Squarespace
Squarespace automatically includes a skip link in most of its newer templates. You can verify this by pressing Tab on your Squarespace site. If it doesn't appear, you can add one via the Code Injection feature (under Settings > Advanced > Code Injection) by injecting the HTML and CSS at the top of the page. However, targeting the correct content area can be tricky because Squarespace's id values change between templates.
Static Sites and Custom Builds
If you're building your own HTML, you have full control. Follow the code examples in this article. Put the skip link as the first child of <body>, use the off-screen CSS technique, and make sure the target id matches. If you're using a static site generator like Eleventy, Hugo, or Gatsby, add the skip link to your base layout template so it's included on every page.
Quick Check
Right now, go to your site, click in the address bar, and press Tab. If you don't see a "Skip to content" link appear, you're missing one. If it does appear but pressing Enter doesn't move focus past the navigation, it's broken. Either way, the fix takes about five minutes with the code examples above.
Wrapping Up
Skip navigation links are one of the smallest changes you can make to a website and one of the most impactful for keyboard and screen reader users. The HTML is a single anchor tag. The CSS is about ten lines. The implementation takes five minutes. There's really no reason not to have one.
If you're building a new site, add a skip link from day one. If you're maintaining an existing site, add one now. And if you're not sure whether your current skip link is working correctly, test it. Tab to it, press Enter, and see where focus lands.
Want to go beyond skip links? Read our guides on keyboard accessibility and screen reader testing for a deeper look at making your site work for everyone. And if you want a quick snapshot of your site's overall accessibility, run a free scan to see where you stand.
Start With a Free Scan
Find out if your site has a working skip link, along with every other accessibility issue, by running a free accessibility scan. You'll get a professional report with code-level fix recommendations in under 60 seconds.