WCAG 2.2 Fix Guide

How to Add a Skip Navigation Link WCAG 2.2

A skip navigation link is a hidden link at the very top of the page that becomes visible when focused. It lets keyboard and screen reader users jump directly to the main content, bypassing the header and navigation links on every page.

WCAG 2.2 Success Criterion 2.4.1 (Level A) axe-core: skip-link

Why this matters

Without a skip link, keyboard users must Tab through every navigation link on every page before reaching the main content. On a site with 20 nav links, that means pressing Tab 20 times just to start reading. This is exhausting and is a fundamental keyboard accessibility requirement.

Code examples

✗ Incorrect — fails WCAG
<!-- No skip link present -->
<header>
  <nav>... 20 links ...</nav>
</header>
<main>Content</main>
✓ Correct — passes WCAG
<!-- Add as the very first element in body -->
<a href="#main-content" class="skip-link">
  Skip to main content
</a>

<header>...</header>
<main id="main-content">...</main>

<style>
.skip-link {
  position: absolute;
  top: -50px;
  left: 1rem;
  background: #005fcc;
  color: white;
  padding: 10px 20px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  font-weight: bold;
  z-index: 99999;
  transition: top 0.15s;
}
.skip-link:focus {
  top: 0;
}
</style>

How to fix it — step by step

  1. 1
    Add a skip link as the very first element inside <body>
  2. 2
    The href should point to the id of your main content element (#main-content)
  3. 3
    The link should be visually hidden until focused, then appear at the top of the page
  4. 4
    Make sure the target element has the matching id attribute
  5. 5
    Test by pressing Tab as the very first action on any page — the skip link should appear
  6. 6
    The link text should say 'Skip to main content' — this is widely understood
Reference: WCAG 2.2 Success Criterion 2.4.1 (Level A)

Test it for free

Use WebPossum to automatically detect this violation and every other WCAG 2.2 issue on your site. Free, instant, no signup required.