Skip to Content
Component ExamplesSkip Links

Skip Links

Accessible skip link patterns — bypassing repeated navigation to reach main content

Maintained by Martin KrugerLast reviewed

Overview

Skip links allow keyboard and screen reader users to jump past repeated navigation blocks directly to the main content. Without a skip link, keyboard users must Tab through every navigation item on every page load before reaching the content they came for. This is particularly burdensome on pages with large navigation menus.

WCAG Criteria:

Key requirements:

  • The skip link must be the first focusable element on the page
  • It must become visible when focused (visually hidden by default is acceptable)
  • The target <main> element needs tabindex="-1" so it can receive programmatic focus
  • The link’s href must match the id on the main content element

Skip Link vs. No Skip Link

Inaccessible

Welcome to Acme Co.

The best widgets on the web.

Keyboard users must Tab through all 6 nav links before reaching the heading.

View inaccessible code
<!-- No skip link — keyboard users must Tab through all nav links first -->
<nav>
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/pricing">Pricing</a>
  <a href="/blog">Blog</a>
  <a href="/docs">Docs</a>
  <a href="/contact">Contact</a>
</nav>
<main>
  <h1>Welcome to Acme Co.</h1>
  <p>The best widgets on the web.</p>
</main>
Accessible
Skip to main content

Welcome to Acme Co.

The best widgets on the web.

Tab into the preview above to reveal the skip link. Activating it moves focus directly to the main content heading.

View accessible code
<style>
  .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    padding: 8px 16px;
    background: #1e293b;
    color: white;
    text-decoration: none;
    border-radius: 0 0 6px 0;
    z-index: 100;
    /* Becomes visible on focus */
    transition: top 0.1s;
  }
  .skip-link:focus {
    top: 0;
  }
</style>
 
<!-- First element on page -->
<a href="#main-content" class="skip-link">Skip to main content</a>
 
<nav>
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/pricing">Pricing</a>
  <a href="/blog">Blog</a>
  <a href="/docs">Docs</a>
  <a href="/contact">Contact</a>
</nav>
 
<!-- tabindex="-1" allows the element to receive programmatic focus -->
<main id="main-content" tabindex="-1">
  <h1>Welcome to Acme Co.</h1>
  <p>The best widgets on the web.</p>
</main>

Resources

Non-Modal DialogsLandmarks