Skip Link

Let keyboard users jump past the header and navigation straight to the main content with their first Tab press.

index.html

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

  <header>…logo and a long navigation menu…</header>

  <main id="main" tabindex="-1">
    <h1>Page title</h1>
  </main>
</body>

skip-link.css

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1000;
  padding: 0.75rem 1rem;
  background: #111;
  color: #fff;
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: 600;

  /* Off-screen until focused */
  transform: translateY(calc(-100% - 1rem));
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
}

/* The target gets focus but doesn't need a focus ring */
main:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

Keyboard and screen-reader users move through a page in order. Without a skip link they Tab through every menu item on every page before reaching the content. WCAG 2.4.1 (Bypass Blocks) asks for a way around repeated blocks — a skip link is the simplest.

How it works

It's the first focusable element in <body>, so the first Tab lands on it.
It's moved above the viewport with transform (not display: none, which would make it unfocusable).
On :focus it slides into view, so sighted keyboard users can see where they are.
href="#main" points at the <main> element's id. Activating it moves the browser's focus starting point there, so the next Tab continues inside the main content.
tabindex="-1" on <main> makes it focusable by script/links but not part of the normal Tab order. It makes the jump reliable in older browsers and screen readers.

About the preview

In the WANCode preview, links don't navigate, so the preview's script.js moves focus to the target itself. On a real page the browser does this for you — you don't need that script.

Usage

Text

1. Open your page.
2. Click the address bar, then press Tab once.
3. The "Skip to main content" link should appear in the top-left.
4. Press Enter, then Tab again — focus should be inside <main>, not the menu.