A skip link is one of the simplest accessibility measures you can take to make life easier for keyboard users (including screen reader users).
At the same time, it is also one of the areas where things often go wrong in practice. The implementation may look straightforward, but the details determine whether a skip link actually works for keyboard and screen reader users.
In this article, we explain what makes a good skip link, how to implement one correctly, and how to avoid common mistakes we regularly encounter in audits.
What is a skip link?
According to WCAG 2.4.1 (Bypass Blocks), repetitive content must be skippable. A skip link (also known as a skip nav or skip navigation link) is a link on the page that enables exactly that. It allows users to skip repetitive content, such as the main navigation, and jump directly to the main content of a page.
This is particularly important for keyboard users, screen reader users, and people who use alternative input devices.
An accessible skip link has three key characteristics:
- it is the first focusable element on the page,
- it is visible as soon as it receives keyboard focus,
- it moves focus directly to the main content.
Simply “scrolling down” to an anchor is not sufficient; correct focus behaviour is essential.
HTML: the right structure
Place the skip link directly after the <body> element.
The main content of the page must also have a logical and semantic anchor target. Wherever possible, always use <main> instead of a generic <div>. This also helps screen readers better understand the page structure.
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<header>
<nav>this is your main navigation</nav>
</header>
<main id="main">
...
</main>
...CSS: visible on focus
A skip link may be visually hidden, as long as it becomes visible when it receives focus. Do not use display: none or visibility: hidden, as this removes the link for screen reader users as well.
Using CSS, you can keep the link hidden by default and reveal it when it receives focus. The following CSS moves the skip link off-screen when it does not have focus, and places it back in the top-left corner when it does.
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px 12px;
z-index: 1000;
text-decoration: none;
}
.skip-link:focus {
top: 0;
}
Moving focus matters
The purpose of a skip link is not only to visually jump to content, but also to move keyboard focus.
Although modern browsers generally handle fragment links (links within a page using an ID value such as #main) correctly, <main> is not focusable by default. This is intentional, as you usually do not want such a “container” element to receive focus during normal keyboard navigation.
You can address this by adding a negative tabindex. This ensures that <main> does not receive focus when tabbing through the page, but can receive focus when navigated to via a fragment link.
<main id="main" tabindex="-1">Multiple skip links: when do they make sense?
On complex pages, for example those with extensive navigation, filters, or data model views, it can be useful to provide multiple skip links.
Keep in mind, however, that each skip link adds an extra stop in the keyboard navigation order. More is not automatically better.
For example, avoid adding skip links for functionality that is already located at the top of the page, such as “Skip to main menu” or “Skip to search”. Skip links like “Skip to footer” are also unnecessary and tend to add noise rather than value.
Testing: how to know it works
Always test a skip link in practice:
- Press Tab: does the skip link appear?
- Press Enter: does focus actually move into the main content?
- Test with a screen reader: is the link announced in a logical way?
- Test on pages with long menus: does it meaningfully reduce the number of interactions?
If the answer to any of these questions is “no”, the implementation is not finished yet.