About 16% of the global population, or roughly 1.3 billion people lives with some form of disability. Many of them use the web every day, and many run into big obsctacles doing it.
According to WebAIM's 2025 analysis of the top one million home pages, 94.8% had at least one detectable WCAG failure. That means the overwhelming majority of websites are putting up barriers for users who are already working harder to navigate them. 69% of disabled online consumers say they leave websites they find difficult to use.
A lot of accessibility work involves audits and time-consuming changes to code and design. Skip links, on the other hand, are one of the easiest fixes you can make.
What is a skip link?
Most websites have the same things at the top of every page: a logo, a menu with several links, a search bar. If you use a mouse, you can scroll right past it. But if you use a keyboard or a screen reader to browse the web, you have to move through every single one of those items before you can get to the article, product, or form you actually came for.
On a site with ten links in the menu, that means pressing Tab ten times to get to the content. And on sites with mega drop-down menus, it can be many more than that.
A skip link (also called a "skip navigation" link or "skip to main content" link) fixes this. It is a link that lives at the top of a page that lets users jump right to the main content. It is usually invisible until a keyboard user presses Tab, at which point it pops into view.
In other words: a skip link saves people from doing repetitive work every time they load a new page on your site.
Who does a skip link help, and why?
Skip links mainly help two groups of people.
Keyboard-only users
Not everyone uses a mouse. People who navigate with a keyboard include those with motor disabilities who may use a head switch, a mouth stick, or a sip-and-puff device to press keys one at a time. It also includes those that just prefer using a keyboard. For someone who can only make one keypress every few seconds, having to tab through mega-menu navigation is exhausting.
Screen reader users
Screen readers (software that reads web pages aloud) have their own shortcuts for jumping around a page's regions. But many websites are structured without defined regions, or don’t use sequential headings, so a clearly labeled skip link is the most reliable way to get to the main content quickly.
Legal and compliance context
Skip links are not only good practice for building a website that is usable for everyone. They are also required by law in many areas. Non-compliance can leave you vulnerable to lawsuits.
An internationally recognized standard called WCAG, or Web Content Accessibility Guidelines, is used as the baseline for most accessibility legislation. This standard has been revised several times. The current version is WCAG 2.2, released in 2023. WCAG is produced by the World Wide Web Consortium (W3C), a nonprofit organization that develops web standards.
WCAG compliance comes in three levels: Level A (the minimum level of compliance), Level AA, and Level AAA (not practical for many websites, but some of them are nice-to-have). Together, these levels make up 87 testable criteria for determining whether a website is accessible.
Skip links (called bypass blocks in the standard) are in Level A. They’re one of the most basic accessibility fixes you can make. Because of this, skip links are one of the easiest issues for an automated accessibility scanner to detect (along with missing ALT Text). And they’re one of the first things that show up in legal complaints.
Here’s the spec from WCAG:
WCAG 2.4.1 — Bypass Blocks (Level A): The Web Content Accessibility Guidelines (WCAG) Success Criterion 2.4.1 requires that "a mechanism is available to bypass blocks of content that are repeated on multiple web pages." A skip link is the most common way to meet this requirement. Level A is the minimum level of WCAG conformance.
Americans with Disabilities Act (ADA)
The ADA requires that businesses open to the public provide equal access to people with disabilities. Courts in the United States have repeatedly ruled that this applies to websites. In the first half of 2025 alone, over 2,000 ADA website accessibility lawsuits were filed. That's a 37% increase compared to the same period in 2024.
A missing skip link is a detectable WCAG failure that could appear in such a lawsuit.
Section 508
Section 508 of the Rehabilitation Act requires U.S. federal agencies and organizations that receive federal funding to make their digital content accessible. It uses WCAG 2.2 Level AA as the standard for compliance, and Bypass Blocks (2.4.1) is a Level A requirement within that.
European Accessibility Act (EAA)
The European Accessibility Act requires many private-sector businesses (including e-commerce companies) to meet accessibility standards when serving EU customers. WCAG Level AA compliance is the accepted technical baseline.
How do I add a skip link?
Adding a skip link takes two things: some HTML, and some CSS.
Step 1 — Add the HTML link
Locate the
<body>tag in your HTML document.Place a link tag as the very first item inside the body tag, before anything else. The
hrefattribute points to theidattribute on the<main>tag.
<a class="skip-link" href="#main">Skip to main content</a>
Here’s where it should be in the document:
<body>
<!-- add it as the first item -->
<a class="skip-link" href="#main">
Skip to main content
</a>
<header>
<nav>
<a href="link1.html">Link 1</a>
<a href="link2.html">Link 2</a>
<a href="link3.html">Link 3</a>
</nav>
</header>
...Now add a matching
idattribute to your<main>content tag, so thehrefattribute from the skip link points to it.
<!-- Add the matching ID to your main content element -->
<main id="main">
<h1>Page title</h1>
<p>Your page content starts here...</p>
</main>Step 2 — Style it with CSS
Now that we’ve added the HTML, let’s style it with CSS.
One approach is to hide the link off-screen by default, then slide it into view when a keyboard user tabs to it. This keeps your design clean for mouse users while staying fully usable for keyboard users. You can use additional styling, but this provides a good start.
.skip-link {
position: absolute;
top: -100%;
left: 0;
z-index: 9999;
padding: 0.5rem 1rem;
background: #000;
color: #fff;
}
.skip-link:focus {
top: 0;
left: 0;
outline: 2px solid #fbbf24;
outline-offset: 2px;
}What link text should I use?
Several wordings are common and all are acceptable, though WebAIM recommends "Skip to main content" because it tells users where they are going, not just what they are skipping. Options like "Skip navigation" or "Skip to content" are fine, too. The most important thing is that the purpose is clear.
Adding skip links on popular platforms
If you use a website builder or CMS, you may not have direct access to the <body> tag. Here's how to add skip links on four common platforms.
WordPress
Many accessibility-ready WordPress themes already include a skip link in the header.php template. Plugins like WP Accessibility may also add one automatically..
Before adding one, check to see if your theme already has a skip link. If using Chrome, right-click anywhere on the page and click Inspect.
The developer tools window opens. ****Look for a skip link immediately after the
<body>tag. If there is one, you’re done! If not, continue to step 3.If a skip link is missing, add the link in
header.phpimmediately after the opening<body>tag.Add the matching CSS to your
style.cssor the Additional CSS panel in Customizer.
Shopify
From your Shopify admin, go to Online Store , then click on Themes.
Click ••• , then click Edit code
Add the skip link HTML as the first element after
<body>, and add the matching ID to your<main>element.Paste the CSS into your theme's
assets/base.cssor into the Custom CSS section of the theme editor.Save your changes.
Squarespace
Click Settings, then click Advanced, then click Code Injection.
Add the skip link HTML in the Header field.
Note that the skip link target ID may vary by template. Check your page's
<main>element to confirm its ID, and enter that into thehrefattribute of the skip link.Add the skip link CSS in the Custom CSS editor.
Save your changes.
Webflow
Follow these steps for a Custom Code Embed in Webflow.
Common issues with skip links
Not adding focus state CSS
If someone has hidden the skip link with CSS properties like display: none, visibility: hidden, or opacity: 0 without adding a :focus rule to reveal it, keyboard users won't be able to reach it even though it exists in the code. Always test by pressing Tab on a fresh page load.
Sticky or fixed headers
If your site has a header that sticks to the top of the screen as you scroll (a "fixed" or "sticky" header), activating a skip link may scroll the page so that the first heading or paragraph gets hidden underneath the navigation bar.
One fix for this is to add a CSS offset equal to the height of your fixed header, with the scroll-margin-top property. If your header is 64px tall, add this to your <main> element:
main#main-content {
scroll-margin-top: 64px; /* match your header's height */
}The target element has no ID
If your skip link points to #main-content but your <main> element has no id attribute, or has a different ID like #schoolbus, nothing will happen when the link is activated. Double-check that the href and id values match exactly, including capitalization.
7. How to test that it works
You’ve added a skip link to your HTML, and styled it with CSS, but you’re not sure if it works. Let’s test it!
Automated tools
There are automated tools like the WAVE browser extension and axe DevTools to use in accessibility testing. They will flag a missing skip link as a WCAG 2.4.1 failure. Sometimes these automated tools can flag a skip link as not existing, so it’s best to follow up with manual keyboard testing.
Keyboard navigation test
This is the most important test, and you don't need any special software.
Open your page in a browser.
Press Tab once. The skip link should appear and be visually focused.
Press Enter. The page should scroll and your browser's focus indicator should move to the main content area.
Press Tab again. The next focused item should be something inside
<main>, not something in the header or navigation.
If any of those steps fail, refer back to the common issues above.
Screen reader test
A screen reader is an application that reads everything on a computer or phone screen out loud using a (usually robotic) voice. It describes text, buttons, images, and menus so the user can hear what's on the screen instead of having to see it.
When you move your mouse or finger around the screen, the screen reader announces what you're pointing at. It’s kind of like having someone sitting next to you, describing everything on the display. It can also read entire web pages or documents from top to bottom, like an audiobook.
For sighted users, screen readers can be disorienting, as they talk quickly, but test the skip link with at least one screen reader. Listen for the link being announced with its text (”skip to main content, link”). Make sure the focus moves to the main content after clicking the skip link. The most widely used options are NVDA, JAWS, and VoiceOver.
NVDA
Platform: Windows
Cost: Free
Website: https://www.nvaccess.org/download/
JAWS
Platform: Windows
Cost: $674 per year
Website: https://store.vispero.com/collections/jaws/products/jaws-home-subscription
VoiceOver
Platform: MacOS
Cost: Free
8. When you might not need a skip link
A skip link is most valuable when there is a lot of repetitive navigation between the top of the page and the main content. In some specific situations, other techniques can satisfy WCAG 2.4.1 on their own:
Very few navigation items. If a page only has two or three links before the main content, a skip link adds very little value. WCAG 2.4.1 is about efficiency, so if the navigation is already short, it's not a huge inconvenience to tab through it.
Correct use of landmarks and headings. Using semantic HTML elements like
<main>,<nav>, and<header>, combined with a proper heading hierarchy starting with<h1>, gives screen reader users alternative ways to jump around. However, this does not help sighted keyboard users who don't have screen reader shortcuts, so a skip link is still strongly recommended.Single-page apps with no repeated nav. If your page has no repeated navigation menu, like a full-screen form with nothing above it, a skip link may not be necessary.
When in doubt, just add the skip link.
9. Best practices when adding skip links
You’ve added a skip link to the HTML, and styled it with CSS
Keep it to one skip link. More links means more work for the keyboard users you are trying to help. As WebAIM notes, add too many and you may eventually need a "skip the skip links" link.
The link is visible when focused, and is never hidden with
display: noneorvisibility: hiddenThe link text clearly describes the destination: "Skip to main content" is preferred
The target element has a matching
idattribute and is a semantic element like<main>If the target is not natively focusable,
tabindex="-1"is set programmatically and removed on blurIf the site uses a sticky header,
scroll-margin-topis set on the target to prevent content from appearing behind the headerIt is the first focusable element in the page's tab order
The skip link has been tested with keyboard navigation on a real browser
The skip link has been tested with at least one screen reader (NVDA, JAWS, or VoiceOver)