Skip Navigation Links

Add skip links that let keyboard users jump past repeated navigation to the main content.

Overview

Keyboard users (and screen reader users) navigate pages sequentially they Tab through every focusable element. On pages with large navigation menus, this means pressing Tab many times before reaching the main content. This is frustrating and a WCAG 2.1 failure. Skip navigation links solve this: a visually hidden link at the very top of the page that becomes visible on focus, allowing keyboard users to jump directly to main content. This is one of the most impactful accessibility wins it costs ~10 lines of HTML and CSS but dramatically improves the keyboard experience.

Key Points

•Place the skip link as the very first focusable element in the <body>
•The skip link href points to the main content landmark: href="#main-content"
•The target element needs id="main-content" on the <main> element
•Visually hide the link with CSS but make it visible on :focus
•WCAG 2.4.1 (Level A) requires a mechanism to bypass blocks of repeated content
•Multiple skip links can be provided: "Skip to nav", "Skip to search", "Skip to footer"

Examples

Skip link HTML and CSS

<!-- HTML: first thing in <body> -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<header>
  <nav>
    <!-- Long navigation with many links -->
  </nav>
</header>

<main id="main-content" tabindex="-1">
  <h1>Page Title</h1>
  <p>Main content here...</p>
</main>

tabindex="-1" on <main> allows it to receive focus programmatically.

CSS visible only on keyboard focus

/* Visually hidden but accessible */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 12px 24px;
  background: #1d4ed8;
  color: white;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}

/* Becomes visible when focused */
.skip-link:focus {
  top: 0;
}

Using top: -100% hides it off-screen; on :focus it slides down to the top.

Multiple skip links for complex pages

<body>
  <!-- Multiple skip targets for complex pages -->
  <nav class="skip-links" aria-label="Skip navigation">
    <a href="#main-content">Skip to main content</a>
    <a href="#main-nav">Skip to navigation</a>
    <a href="#site-search">Skip to search</a>
  </nav>

  <header>
    <a href="/" id="logo">Site Logo</a>
    <nav id="main-nav">...</nav>
    <form id="site-search">...</form>
  </header>

  <main id="main-content" tabindex="-1">
    ...
  </main>
</body>

Common Mistakes

Using display:none or visibility:hidden these remove the element from tab order
Forgetting tabindex="-1" on the target some browsers don't focus non-interactive elements
Placing the skip link after the navigation it must come BEFORE the content to skip

Note

Test your skip link by pressing Tab on the page it should appear, and pressing Enter should jump past the navigation. Test with VoiceOver or NVDA to confirm screen reader behavior.

Skip Navigation Links

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What WCAG criterion requires a skip navigation mechanism?