Accessibility Developer Kit · Guide 04 / 20

Accessible Skip Navigation Link

One short link that transforms your site for keyboard and switch-device users. Three lines of HTML, a specific CSS pattern — and your pages become 10× faster to use with the keyboard.

WCAG: 2.4.1 · 2.4.3 · 2.4.7
Level: Beginner
Icons: none (text link)

What we are building

A link that lets keyboard users jump past the nav straight to the main content.

Without a skip link, a keyboard or switch user has to Tab through your entire navigation on every page before reaching the main content. On a 15-link nav bar that is 60+ presses per page. The skip link fixes this with one <a href="#main">, correct CSS, and a matching tabindex="-1" on the target.

The 4 real-world variants

Tab into each mini page below — the skip link appears first.

Variant A

Single skip-to-main link

Preferred

Live example

Main content

This is where the skip link lands focus.

Tab into the mini page — the skip link appears first. Press Enter to jump.

HTML · Accessible

<!-- Skip link is the first focusable element, target has tabindex="-1" -->
<body>
  <a href="#main" class="skip-link">Skip to main content</a>

  <header>
    <nav>...</nav>
  </header>

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

The simplest, universal pattern. Must be the first focusable element and target an element with tabindex="-1".

Variant B

Multiple skip links

Complex pages

Live example

Documentation

Jump target lands here. Each skip link moves focus to its region.

Three skip links wrapped in a <nav aria-label="Skip links"> landmark.

HTML · Accessible

<!-- Multiple skip links grouped in their own landmark -->
<nav aria-label="Skip links" class="skip-links">
  <a href="#main">Skip to main content</a>
  <a href="#nav">Skip to navigation</a>
  <a href="#search">Skip to search</a>
</nav>

<header>
  <div id="search" tabindex="-1">
    <input type="search" aria-label="Search" />
  </div>
  <nav id="nav" tabindex="-1" aria-label="Main">...</nav>
</header>

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

Dashboards, docs sites, and sites with persistent search benefit from several skip targets grouped in a nav landmark.

Variant C

Always-visible skip link

More discoverable

Live example

Services

Always-visible skip link — more discoverable, no CSS trickery.

Visible to everyone; still works with keyboard. Common on gov / enterprise sites.

HTML · Accessible

<!-- Always visible — more discoverable, no CSS trick needed -->
<a href="#main" class="skip-link skip-link--visible">
  Skip to main content
</a>

<style>
  .skip-link--visible {
    display: inline-block;
    padding: 8px 16px;
    background: #0b7a3b;
    color: #fff;
    text-decoration: none;
  }
  .skip-link--visible:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
  }
</style>

Favoured by government and enterprise sites. Removes the 'hidden until focused' CSS trick, more discoverable, same keyboard behavior.

Variant D

Hiding pattern (display:none vs clip)

Critical fix

Live example

Main content

Tab through the mini-page above — only the clip pattern reveals the skip link on focus.

display:none removes the element from the tab order AND the a11y tree. The clip technique keeps it reachable.

CSS · Accessible

/* The "visually hidden" / clip pattern keeps the link in the
   accessibility tree so screen readers can find it, but off-screen
   until focused. */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* When focused, un-clip and bring it on-screen */
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  background: #0b7a3b;
  color: #fff;
  z-index: 9999;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

display:none removes the link from the a11y tree AND tab order. Use the 'visually hidden' clip pattern so screen readers can still find it.

Final recommendation: Add a single "Skip to main content" link as the first element of every page. Use the clip pattern to hide it until focused, and give the target tabindex="-1". That is the entire fix.

Flagship implementation

Copy-paste once into your layout. Works on every page.

SkipLink.jsx

import React from "react";
import "./SkipLink.css";

/**
 * SkipLink
 *   - targetId:  id of the main landmark (default "main")
 *   - children:  the link label (default "Skip to main content")
 *   - alwaysVisible: show the link to everyone (not just keyboard users)
 */
export default function SkipLink({
  targetId = "main",
  children = "Skip to main content",
  alwaysVisible = false,
}) {
  function handleClick(e) {
    e.preventDefault();
    const target = document.getElementById(targetId);
    if (target) {
      target.focus({ preventScroll: false });
      // In case the target isn't naturally focusable, add tabindex="-1".
    }
  }

  return (
    <a
      href={`#${targetId}`}
      onClick={handleClick}
      className={`skip-link ${alwaysVisible ? "skip-link--visible" : ""}`}
    >
      {children}
    </a>
  );
}

Usage · Layout.jsx

import SkipLink from "./SkipLink";

export default function Layout({ children }) {
  return (
    <>
      {/* First focusable element on the page */}
      <SkipLink targetId="main" />

      <header>
        <nav aria-label="Main">
          <a href="/">Home</a>
          <a href="/products">Products</a>
        </nav>
      </header>

      {/* Target must have tabindex=-1 so focus() works correctly */}
      <main id="main" tabIndex={-1}>
        {children}
      </main>
    </>
  );
}

/* --- Multiple skip links (for complex apps) --- */
<nav aria-label="Skip links" className="skip-links">
  <SkipLink targetId="main">Skip to main content</SkipLink>
  <SkipLink targetId="search">Skip to search</SkipLink>
  <SkipLink targetId="footer">Skip to footer</SkipLink>
</nav>

Keyboard behavior

The whole point of the skip link is the keyboard experience.

Action	Expected result
First `Tab` on page	Skip link appears (or is already visible) and receives focus
`Enter`	Focus moves to the main content landmark
Next `Tab`	Focus moves to the first interactive element inside main
Shift + `Tab`	Focus returns to the browser chrome (or the previous page element)

Screen reader expectations

Not every SR user activates the skip link, but they all benefit when they do.

Skip link focused: “Skip to main content, link”
After activation: “Main, region” (or whatever landmark the target carries)
Important: If the target does not have tabindex="-1", focus may not move at all — the URL will change but the keyboard position stays with the link.

WCAG mapping

Why each rule matters here.

Success Criterion	Why it matters
2.4.1 Bypass Blocks (A)	The direct requirement — provide a way to skip repeated blocks of content.
2.4.3 Focus Order (A)	The skip link must be the first focusable element.
2.4.7 Focus Visible (AA)	When focused, the link must be visible to sighted keyboard users.
1.4.11 Non-text Contrast (AA)	Focused link background and focus ring must have 3:1 contrast.

Testing approach

Framework-agnostic patterns. Pick the one that matches your stack.

Pattern: render → axe → assert first Tab lands on the skip link → click → focus moves to target.

Jest + Testing Library + jest-axe

SkipLink.test.jsx

// Jest + @testing-library/react + jest-axe
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { axe, toHaveNoViolations } from "jest-axe";
import SkipLink from "./SkipLink";

expect.extend(toHaveNoViolations);

test("renders with accessible name", () => {
  render(
    <>
      <SkipLink targetId="main" />
      <main id="main" tabIndex={-1}>content</main>
    </>
  );
  expect(
    screen.getByRole("link", { name: /skip to main content/i })
  ).toBeInTheDocument();
});

test("moves focus to the target on click", async () => {
  const user = userEvent.setup();
  render(
    <>
      <SkipLink targetId="main" />
      <main id="main" tabIndex={-1} data-testid="main">
        main
      </main>
    </>
  );
  await user.click(
    screen.getByRole("link", { name: /skip to main content/i })
  );
  expect(screen.getByTestId("main")).toHaveFocus();
});

test("has no axe violations", async () => {
  const { container } = render(
    <>
      <SkipLink />
      <main id="main" tabIndex={-1}>content</main>
    </>
  );
  expect(await axe(container)).toHaveNoViolations();
});

Vitest + Testing Library

SkipLink.test.jsx

// Vitest + @testing-library/react
import { expect, test } from "vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import SkipLink from "./SkipLink";

test("is reachable as the first Tab stop", async () => {
  const user = userEvent.setup();
  render(
    <>
      <SkipLink />
      <main id="main" tabIndex={-1}>content</main>
    </>
  );
  await user.tab();
  expect(
    screen.getByRole("link", { name: /skip to main content/i })
  ).toHaveFocus();
});

Playwright + @axe-core/playwright

skip-link.spec.js

// Playwright + @axe-core/playwright
import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";

test("skip-link page has no serious a11y violations", async ({ page }) => {
  await page.goto("/en/accessible-skip-link");
  const results = await new AxeBuilder({ page })
    .withTags(["wcag2a", "wcag2aa", "wcag22aa"])
    .analyze();
  const serious = results.violations.filter(
    (v) => v.impact === "critical" || v.impact === "serious"
  );
  expect(serious).toEqual([]);
});

test("first Tab reveals the skip link", async ({ page }) => {
  await page.goto("/en/accessible-skip-link");
  await page.keyboard.press("Tab");
  const link = page.getByRole("link", { name: /skip to main content/i }).first();
  await expect(link).toBeFocused();
});

Manual QA checklist

Tick each item before shipping.

Skip link is the first focusable element on the page
Appears visually on first Tab (or is always visible)
Uses the clip/visually-hidden pattern, not display:none
Target has tabindex="-1" or is natively focusable
Pressing Enter actually moves focus to the target
Focused skip link has 3:1 contrast against its background
Link text clearly describes the target (not just "Skip")
Multiple skip links grouped in a <nav aria-label="Skip links">
Works on every page template, not just the homepage
Zero critical / serious axe violations

Common mistakes

The skip-link bugs we see on nearly every audit.

Using display: none. Removes the link from the tab order AND the accessibility tree.
Target has no tabindex="-1". The URL hash changes but focus does not move — the keyboard user is still at the top of the page.
Skip link exists but is not the first element. A banner, chat widget or cookie bar steals the first Tab stop.
Multiple skip links without a landmark. Group them in <nav aria-label="Skip links">.
Low contrast when visible. White text on light-gray background fails 4.5:1.
Non-descriptive label. Just "Skip"doesn’t say where to.

Download & next

Grab the code bundle, or jump to the next guide.

Download .zip bundleVanilla + React source, demo, and tests (Jest / Vitest / Playwright)

Next: Accessible NavigationLandmarks, aria-current, skip targets.

What we are building

The 4 real-world variants

Main content

Documentation

Services

Main content

Flagship implementation

Keyboard behavior

Screen reader expectations

WCAG mapping

Testing approach

Jest + Testing Library + jest-axe

Vitest + Testing Library

Playwright + @axe-core/playwright

Manual QA checklist

Common mistakes

Download and next