Skip to Content
Component ExamplesSkip Links

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
<!-- 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>
Live Preview

Welcome to Acme Co.

The best widgets on the web.

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

Accessible
<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>
Live Preview
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.

Resources

Live Regions