A skip link is an in-page link placed at the very beginning of a web page that moves keyboard focus directly to the main content, letting users bypass repeated blocks such as headers, navigation menus and search bars. Its most common label is Skip to main content.
In web accessibility, skip links are the classic technique for meeting the WCAG success criterion 2.4.1 Bypass Blocks, a Level A requirement. They matter most for keyboard users, switch users and screen reader users, who otherwise have to move through every navigation item on every page before reaching what they came for.
How a skip link works
A skip link is an ordinary anchor whose href points to a fragment identifier on the same page, such as #main. Activating it scrolls to the target element and, when implemented correctly, moves the sequential focus starting point there, so the next press of the Tab key reaches the first interactive element inside the main content.
- The link is the first focusable element in the document, before the logo and the navigation.
- It stays visually hidden until it receives keyboard focus, then appears on screen.
- The user presses Enter while the link is focused.
- The browser jumps to the target, usually the main landmark with
id="main". - Focus continues from the target, so further tabbing starts inside the content.
Historically, some browsers scrolled to the target without moving focus. Adding tabindex="-1" to a non-interactive target makes it programmatically focusable, which remains a reliable safeguard when the target is a container rather than a link or form control.
Visibility patterns for skip links
The way a skip link is hidden determines whether it works at all. The link must remain in the accessibility tree and the tab order while being invisible to mouse users, and it must become clearly visible on focus for sighted keyboard users.
| Hiding method | Works for keyboard users | Assessment |
|---|---|---|
| Visually hidden, shown on focus | Yes | Recommended standard pattern |
| Always visible at the top | Yes | Simplest and fully robust, but uses layout space |
| Positioned off-screen, shown on focus | Yes | Acceptable if it moves on screen when focused |
| display: none | No | Removes the link from focus and from assistive technology |
| visibility: hidden | No | Link cannot receive focus |
| Visible on focus but behind a sticky header | Partly | Fails focus visibility because it is obscured |
When the link appears, it should have sufficient contrast and a visible focus indicator, in line with criteria 2.4.7 Focus Visible and, in WCAG 2.2, 2.4.11 Focus Not Obscured. A skip link that flashes in a corner with low contrast technically exists but helps few sighted keyboard users.
Skip links compared with other bypass techniques
Skip links are one of several ways to bypass repeated content. WCAG 2.4.1 can also be satisfied through proper landmarks and headings, but those mechanisms mainly help screen reader users, while skip links also serve keyboard users without assistive technology.
| Technique | Primary beneficiaries | Limitation |
|---|---|---|
| Skip link | Keyboard, switch and screen reader users | Only one or a few jump targets |
| Landmark regions | Screen reader users | Standard browsers offer no keyboard landmark navigation |
| Heading structure | Screen reader users | Requires correct heading hierarchy |
| Collapsible navigation | Keyboard users | Collapsed items must still be reachable |
| Browser extensions | Advanced users | Cannot be assumed for all visitors |
In practice, the strongest approach combines a skip link with a sound semantic structure. Landmarks such as header, nav, main and footer, together with a logical heading hierarchy, give assistive technology users several navigation paths, while the skip link provides a single fast route for everyone using a keyboard.
Designing effective skip links
A good skip link is short, predictable and consistent across all pages. Users learn to press Tab once on arrival, so the link should appear in the same place with the same wording throughout a site.
| Decision | Recommended choice | Reason |
|---|---|---|
| Link text | Skip to main content | Clear destination, widely recognized |
| Position in source order | First focusable element | Reached with a single Tab press |
| Number of links | One, rarely two or three | Too many links recreate the original problem |
| Target element | The main landmark | Matches the semantic structure |
| Appearance on focus | High contrast, fixed position | Easy to notice and read |
Complex applications sometimes add a second skip link, for example to the search field or to a results list. Each additional link should solve a real navigation problem, because every extra stop costs a keystroke for users who want the content.
Common skip link failures
Automated accessibility tools often confirm that a skip link exists but cannot verify that it works. Manual keyboard testing is essential, since many failures only appear when the link is actually used.
- Broken target: the fragment points to an ID that no longer exists after a redesign.
- Focus not moved: the page scrolls but the next Tab press returns to the navigation.
- Single-page application routing intercepts the fragment and treats it as a route change.
- Sticky headers cover the target, so content appears hidden under the header after the jump.
- Cookie banners or modals receive focus first, pushing the skip link out of the first position.
- Link hidden permanently with methods that remove it from the tab order.
A quick test takes seconds: load the page, press Tab once, confirm the link appears, press Enter and press Tab again. The second Tab should land inside the main content, not in the header.
In plain words
A skip link is a shortcut button hidden at the top of a page. People who navigate with a keyboard instead of a mouse can use it to jump straight to the main text, rather than pressing the Tab key dozens of times to get past the menu.
Imagine having to read the full table of contents every time you open a book to your bookmark. A skip link is the bookmark that takes you straight to the page you want. Mouse users usually never see it, but for many people it saves time and effort on every visit.
A real-world example
A city council website has a header with a language switcher, a search field and a mega menu containing about 40 links. An accessibility audit records that a keyboard user needs more than 40 Tab presses on every page to reach the content, and that the existing skip link is hidden with display: none, so it never receives focus.
The developers change the link to a visually hidden pattern that appears on focus, point it to the main landmark and add tabindex="-1" to the target. They also adjust the scroll offset so the sticky header no longer covers the heading. After the change, a keyboard user reaches the first content link with two key presses instead of more than forty, and the audit closes the Bypass Blocks finding.