← BlogAccessibility12 June 20269 min read

Skip Links: What They Are, Why They Matter, and How to Add One

A skip link is one of the smallest pieces of code on a page and one of the most useful. It lets keyboard and screen reader users jump straight to the content they came for, instead of tabbing through the same navigation on every single page. Here is what it is, why it is required, how to build one that actually works, and how Destiny QA spots a missing one.

What is a skip link?

A skip link is a hidden, in-page anchor that becomes visible the moment a keyboard user presses Tab on a fresh page. It is almost always the very first focusable element in the document. Activating it moves keyboard focus past the header and navigation and lands it directly on the main content.

In practice it is just a link that points at the page's main region: an <a href="#main"> at the top of the body, paired with a matching target such as <main id="main">. Sighted mouse users never see it. Keyboard and assistive technology users get a shortcut that saves them real time on every visit.

How focus moves with a skip link

1
Page loads
Focus is at the very top of the document, before any visible content.
2
User presses Tab
The hidden "Skip to content" link appears and receives focus.
3
User presses Enter
Focus jumps past the header and nav, straight to the #main target.
4
Reading begins
The user is now on the content they came for, with zero wasted tab stops.

Why we do it

A mouse or touch user can ignore the navigation and click straight into the content. A keyboard user cannot. They move through a page one focus stop at a time, in source order, pressing Tab again and again. Without a skip link, every header link, search box, and menu item sits between them and the content, on every page they open.

This is sometimes called the tab tax. On a typical site the main navigation can be a dozen or more focus stops. Multiply that by every page in a session and the cost adds up fast for people who rely on the keyboard, screen readers, or switch devices.

Getting to the content, with and without a skip link

Without a skip link

1Logo
2Menu toggle
3Search
4Home
5Products
6Pricing
7About
8Blog
9Contact
10Log in
11Sign up
12Main content

11 tab presses before the content, on every page.

With a skip link

1Skip to content
↳Enter
2Main content

1 tab press, then straight to the content.

The standard

A skip link is the most common approach to satisfying WCAG 2.4.1 Bypass Blocks (Level A), which requires a mechanism to skip blocks of content repeated across pages. Other techniques can also satisfy it, such as using ARIA landmark regions alone, but a visible skip link is widely recommended as the most reliable and user-friendly implementation. Level A is the baseline conformance level, so the requirement itself is not optional.

Who it helps

Keyboard users

People who navigate without a mouse, including many users with motor impairments, skip straight to content instead of tabbing through the whole header.

Screen reader users

Skip links appear in the focus order and can be announced, giving a fast, predictable way to reach the main region of each page.

Switch and voice users

People using switch access or voice control issue far fewer commands to reach the content, which reduces fatigue across a session.

How to add one that actually works

A skip link has two parts: the link itself, placed as the first element inside <body>, and a target it points to. The target is usually your main landmark. The trick is the styling. The link should be invisible until it receives keyboard focus, then clearly visible so the user can see what they are about to activate.

index.html

Markup

<body>
  <!-- First focusable element on the page -->
  <a class="skip-link" href="#main">Skip to content</a>

  <header> ... site logo and navigation ... </header>

  <main id="main" tabindex="-1">
    <h1>Page title</h1>
    ...
  </main>
</body>

styles.css

Styling

.skip-link {
  position: absolute;
  left: -9999px;        /* off-screen, but still focusable */
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: #1d4ed8;
  color: #fff;
  border-radius: 0 0 0.5rem 0;
}

/* Bring it on-screen the moment it is focused */
.skip-link:focus {
  left: 0;
}

Two details make the difference between a skip link that works and one that only looks right:

Do not hide the link with display: none or visibility: hidden. Both remove it from the focus order, so a keyboard user can never reach it. Move it off-screen instead, as in the CSS above, so it stays focusable.
Add tabindex="-1" to the target. Some browsers will move the visible viewport to the target but leave keyboard focus behind. A negative tabindex lets the target programmatically receive focus so the next Tab continues from the content, not the top.

Common mistakes we see in audits

The skip link exists but points at an ID that is not on the page, so it goes nowhere.
It is hidden with display: none, so it is never focusable.
It is not the first focusable element, so users still tab through part of the header first.
The target has no matching id, or two elements share the same one.

How Destiny QA detects a missing skip link

Destiny QA checks for a skip link as part of its Semantic landmark structure audit ( a11y.landmark_structure ). After loading a page, it scans every link in the document and treats one as a skip link when its href starts with # and its text contains the word "skip", or when its text matches a known phrase such as "skip to content", "skip to main content", or "skip navigation". If no link qualifies, the page is flagged.

Semantic landmark structureWarningLow

Observed: Missing: skip link
Expected: header, main, footer, nav present with a skip-to-content link
Fix: Add a skip link as the first focusable element on every page so keyboard users can bypass repeated navigation.

Evidence

{
  "hasMainElement": true,
  "hasNavElement": true,
  "hasSkipLink": false,
  "skipLinkHref": null,
  "landmarkIssueCount": 1
}

Simplified example of a finding. The severity rises as more landmark issues stack up on the same page, so a missing skip link alongside a missing <main> or duplicate landmarks is scored higher than a missing skip link on its own.

Because the check runs on every crawled page, it is easy to catch the common case where a skip link was added to the homepage template but never made it onto blog posts, landing pages, or checkout flows. The finding is listed per page in the report, so you can see exactly which templates are missing it and work through the fix one page at a time.

A quick checklist

There is a skip link, and it is the first focusable element on the page.
Its href points at a real target ID, usually your main landmark.
It is hidden off-screen, not with display: none, so it stays focusable.
It becomes clearly visible when focused.
The target has tabindex="-1" so focus moves there reliably.
The skip link is present on every page template, not just the homepage.

The bottom line

A skip link is a few lines of HTML and CSS, but it is one of the highest value accessibility fixes you can ship. It is a Level A WCAG requirement, it takes minutes to add, and it removes friction for keyboard and assistive technology users on every page of your site. The only common failure is forgetting it, or hiding it in a way that breaks it.

If you are not sure whether your pages have one, the fastest way to find out is to run an audit and let the check do the tabbing for you.

Check your pages

Run a free audit on your site

Destiny QA checks every page for a working skip link, semantic landmarks, and the other WCAG failures that keyboard and screen reader users hit first, and shows you exactly where to fix them.

Start free