By Genesis AI Services · April 21, 2026 · 6 min read · Keyboard Accessibility

Skip Navigation Link: How to Implement It Correctly

WCAG criterion: 2.4.1 Bypass Blocks (Level A). A mechanism must be available to bypass blocks of content that are repeated on multiple pages. The skip navigation link is the standard solution.

A skip navigation link lets keyboard users jump past the site header and navigation directly to the main content. Without one, a keyboard user must press Tab through every navigation link on every page — potentially 20–50 Tab presses just to reach the first paragraph of content.

The Basic Implementation

HTML

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

<header>
  <nav>...navigation with many links...</nav>
</header>

<main id="main-content">
  <h1>Page title</h1>
  <p>Content starts here...</p>
</main>

CSS — Visually Hidden Until Focused

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 9999;
  padding: 12px 20px;
  background: #2563eb;
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.1s ease;
}

.skip-link:focus {
  top: 0; /* Slides down into view on Tab */
}

This pattern hides the link off-screen until it receives keyboard focus. When a user presses Tab as their first action, the skip link slides into view. Pressing Enter activates it.

See how 321 websites scored →

View the 2026 Report

The Focus Target Problem

A common implementation bug: the skip link successfully moves the scroll position to #main-content, but screen readers don't actually move focus there. The fix is to make the target focusable:

<!-- Add tabindex="-1" so it can receive programmatic focus -->
<main id="main-content" tabindex="-1">
  <h1>Page title</h1>
  ...
</main>

tabindex="-1" makes the element programmatically focusable (via the anchor link and JavaScript) without adding it to the natural tab order. This is exactly what you want for the skip link target.

Testing Your Skip Link

Open your site in a browser
Press Tab once — the skip link should appear visually
Press Enter — you should be transported to the main content area
Press Tab again — focus should be on the first interactive element inside <main>, not back in the navigation

If step 4 sends you back to the navigation, add tabindex="-1" to the <main> element.

Multiple Skip Links

Complex pages with multiple repeated sections may benefit from multiple skip links:

<nav class="skip-links" aria-label="Skip navigation">
  <a href="#main-content" class="skip-link">Skip to main content</a>
  <a href="#main-nav" class="skip-link">Skip to navigation</a>
  <a href="#search" class="skip-link">Skip to search</a>
</nav>

Show all skip links on first Tab, then hide them after the user moves past them. Don't add more than 3–4 skip links — they become their own navigation burden.

React / Vue / Angular Implementation

// React: on route change, move focus to main content
import { useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';

function MainContent({ children }) {
  const mainRef = useRef(null);
  const location = useLocation();

  useEffect(() => {
    // Move focus to main content on route change
    if (mainRef.current) {
      mainRef.current.focus();
    }
  }, [location.pathname]);

  return (
    <main id="main-content" ref={mainRef} tabIndex={-1}>
      {children}
    </main>
  );
}

Common Mistakes

Skip link is present in HTML but permanently hidden with display:none or visibility:hidden — screen readers skip it too
Skip link target has no tabindex="-1" — focus doesn't move, only scroll does
Skip link is not the first focusable element on the page — it's buried after other interactive elements
Skip link text is vague ("Skip" instead of "Skip to main content")
In SPAs, skip link is only wired to the initial page load and doesn't fire on route changes

Check If Your Skip Link Works

Accessalyze tests for missing bypass blocks and skip link issues as part of its WCAG 2.4.1 check.

Test Your Skip Link →

← Back to Accessalyze

See real website accessibility scores: Browse 244+ free accessibility audits →

Try it yourself

Enter your website URL to get a free accessibility score.