Skip Links: What They Are, How to Build One, and How to Test It

Author: Level Access

A skip link is a hyperlink at the top of a web page that lets keyboard users jump past repeated navigation to the main content. It is usually the first focusable element on the page, and it is often positioned off screen until it is revealed on keyboard focus. When properly built, it satisfies Web Content Accessibility Guidelines (WCAG) Success Criterion 2.4.1 Bypass Blocks (Level A).

Skip links are among the simplest features you can add to a website to improve keyboard accessibility. A skip link, also called a skip navigation link, gives keyboard users direct access to a page’s main content, past the header, logo, navigation links, and repeated blocks of content. Without one, keyboard users tab through every navigation link before reaching anything new, which gets time-consuming on a site with a large main navigation.

This guide covers what skip links do, who they help, how WCAG treats them, and how to build and test one.

Key insights

• Skip links are normally the first focusable element on a page, and the href points to an ID on the main content area.
• WCAG Success Criterion (SC) 2.4.1 requires a mechanism for users to bypass repeated content, not a specific implementation. The World Wide Web Consortium (W3C) lists eight sufficient techniques.
• While there are multiple ways to ensure users can bypass repeated content, skip links are the WCAG 2.4.1 technique that is most available to the widest group, and they provide a strong and visible mechanism.
• Most skip links fail to work because they were implemented incorrectly. Common error patterns include of display: none, a mismatched href and id, and sticky headers covering the link once it is revealed.
• Traditional automated tools cannot confirm that skip links work, so manual testing is essential.

What is a skip link?

A skip link is a hyperlink at the top of a webpage that lets keyboard users jump straight to the main content. You’ll also find skip links called skip navigation links, or named for the text they usually carry: “skip to main content.”

Three things define a skip link. It is normally the first focusable element on the page, so keyboard users reach it on the first press of the Tab key. It is often visually hidden until it receives keyboard focus, then revealed at the top of the page. And its href points to an id attribute on the main content area, where focus moves when a user activates the link.

Skip navigation is the mechanism, not the wording, so a “skip to content” link does the same job.

Who skip links help

Skip links help many people move through web content more efficiently—including screen reader users, people with limited dexterity, people with various motor disabilities, people using mouth sticks or head pointers, and users of switch devices. For all of these users, repetitive navigation costs keystrokes.

However, skip links are arguably the biggest time-saver for keyboard-only users without visual disabilities. Screen reader users can already jump by Accessible Rich Internet Applications (ARIA) landmark or by heading when either is present, but users navigating with the Tab key alone don’t have these same shortcuts. That means that, on a site with 30 navigation menus and links, keyboard users who are not using other assistive technologies could spend 30 tab presses on every page before reaching anything new. Skip links are the only bypass technique that specifically benefits this user group.

Skip links and WCAG 2.4.1

Skip links don’t only help users navigate. They’re also how most sites satisfy a Level A requirement in WCAG, the technical standard that most digital accessibility laws point to.

WCAG is the global benchmark for web accessibility, published by the World Wide Web Consortium (W3C). The latest version, WCAG 2.2, became a W3C Recommendation on Oct 5, 2023, and was revised on Dec 12, 2024. For many organizations, WCAG conformance is vital for meeting compliance obligations:

• Section 508: Section 508 of the Rehabilitation Act of 1973 incorporates WCAG 2.0 Level AA for U.S. federal agencies, and many agencies and contractors now specify 2.1 or 2.2 Level AA in procurement.
• ADA Title II: A 2024 rule from the U.S. Department of Justice (DOJ) adopts WCAG 2.1 Level AA as the benchmark for compliance with Title II of the Americans with Disabilities Act (ADA), applicable to state and local government entities. The deadline is April 26, 2027 for entities serving 50,000 or more people and April 26, 2028 for smaller entities and special districts.
• EAA: The current version of EN 301 549, the presumed standard of conformity with the European Accessibility Act (EAA), incorporates WCAG 2.1 Level AA. A new version incorporating WCAG 2.2 will become official in November 2026.

Skip links fall under WCAG SC 2.4.1 Bypass Blocks, a Level A success criterion. Specifically, this criterion requires that “a mechanism is available to bypass blocks of content that are repeated on multiple web pages.” That wording asks for a mechanism, not for a skip link. The W3C lists eight sufficient techniques, of which skip links are one.

Even though skip links aren’t the only way to conform with WCAG 2.4.1, providing them is still essential for keyboard accessibility. While some browser extensions can assist with landmarks and headings, there are others that surface only to assistive technologies, so skip links are the only way for keyboard users who don’t use other assistive technologies to bypass repeated blocks.

When do you need a skip link?

You need a skip link whenever a block of content repeats across multiple pages and sits ahead of the main content in the DOM. On most sites, that means the header, the logo, and the main navigation.

Skip links aren’t always necessary. A page whose navigation follows the main content in the DOM gives users nothing to skip past, and neither does a page with two or three navigation links. Most browsers also provide a keyboard shortcut back to the first link at the top of the page, so more links in the footer rarely need their own.

If you’re not sure whether a page needs a skip link, here’s a quick test: Tab through the page and count the keystrokes before the first piece of unique content. As a general rule of thumb, if it takes more than five keystrokes to access the unique content, you need to add a skip link. You also need to add a skip link if there is repeated content across a set of pages.

How to add a skip link

Skip links take two pieces: an anchor in the markup, and link text that stands on its own. You may also add a CSS rule that keeps the link out of the visual layout until it’s needed.

Step 1: Add the HTML

Place the anchor as the first element inside the body tag. The href must match the id on the main content area exactly. For example:

<body>
  <a class="skip-link" href="#main">Skip to main content</a>
  <header>…</header>
  <nav>…</nav>
  <main id="main">…</main>
</body>

Position matters as much as the link tag itself. For example, a cookie banner or chat widget that loads ahead of the anchor means keyboard users no longer reach your skip link first.

Step 2: Style it with CSS

Keep the skip link out of the visual layout without removing it from the focus order, then return it when it receives keyboard focus. For example:

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 1em;
  background-color: #fff;
  color: #000;
}
.skip-link:focus {
  left: 0;
}
#main {
  scroll-margin-top: 4rem;
}

Each part of your CSS does one job. Absolute positioning keeps the link visually hidden without removing it from the focus order. The :focus rule returns it to the top layer of the page when it receives keyboard focus. The z-index value keeps it above sticky headers. And scroll-margin-top on the target should match your sticky header height, so the main content link doesn’t drop users underneath it. Once revealed, the link needs a visible focus indicator and readable contrast.

Step 3: Choose the link text

“Skip to main content” is the clearest and most widely recognized wording for a main content link. “Skip navigation” and “Skip to content” work too. The W3C’s position is that “the wording of the link doesn’t matter too much as long as the purpose is clear.”

Avoid “Skip” on its own. Screen readers announce link text out of context, so “Skip” tells users nothing about where they would land. For more examples, review our hyperlink best practices, or start with our introduction to accessibility for developers.

Common skip link mistakes and how to avoid them

Most skip links that fail were built with good intent and broken by one detail. The following list covers some of the most common failures, along with best practices to prevent them.

How to test your skip link

To understand whether skip links work as intended, test them manually in a browser, with a keyboard.

1. Load the page and press Tab once.
2. Confirm the link is revealed, is legible, and has a visible focus indicator.
3. Press Enter.
4. Press Tab again. Focus should land on the first interactive element inside the main content, not back at the top of the page.
5. Repeat with the sticky header in place, and again at 200% browser zoom.

Automated tools confirm that skip links exist and that the target element resolves. They can’t confirm that a link is revealed on focus, that no other elements cover it, or that focus lands where users expect. For more insight on the benefits and limitations of automated tools, explore our guide to web accessibility testing.

Test every template before you ship

Skip links are one of the most straightforward ways to provide a better experience for keyboard users—but they only make a difference if they work. And the only way to know for sure is by engaging with them the way a user would.

You can perform that testing yourself. But for assurance across a full portfolio of digital content, against every standard that applies, it helps to work with an expert partner who tests the way your users navigate. Contact our team to get started.