Apply Skip Navigation

---
name: apply-skip-navigation
description: Use when building any page with repeated header and navigation content — to let keyboard and screen reader users skip directly to the main content without tabbing through every navigation link.
source: W3C WCAG 2.1 SC 2.4.1 Bypass Blocks (Level A), SC 2.4.2 Page Titled (Level A), SC 2.4.4 Link Purpose (Level A); WebAIM Skip Navigation guide
tags: [accessibility, wcag, a11y, skip-link, keyboard-navigation, page-navigation, navigation-efficiency, developer]
related: [apply-keyboard-accessibility, write-semantic-html-structure, design-accessibility-standards]
---

# Apply Skip Navigation

Add skip links, meaningful page titles, and descriptive link text so keyboard users can navigate efficiently without traversing repeated content on every page load.

## Why This Is Best Practice

**Adopted by:** WCAG 2.1 SC 2.4.1 is Level A — required by all major accessibility
laws. WebAIM survey data shows 68% of screen reader users navigate by links and 34%
use "skip to content" links when available. The US Government's 18F accessibility
guide and UK Government Digital Service accessibility guidelines both mandate skip links
as baseline requirements.
**Impact:** A navigation menu with 15 links requires 15 Tab presses to skip on every
page load without a skip link. For a user who reads 200 pages per day (e.g., researchers,
power users), that is 3,000 unnecessary Tab presses. WebAIM found skip links reduce
keyboard navigation time to main content by 70–90% on typical government pages.
**Why best:** The alternative — relying on heading navigation (`H` key in screen
readers) — only works for screen reader users, not sighted keyboard users. A visible
skip link serves both groups. HTML5 landmark elements complement skip links but don't
replace them for sighted keyboard users who need a visible affordance.

Sources: W3C WCAG 2.1 SC 2.4.1, 2.4.2, 2.4.4 (2018); WebAIM Skip Navigation guide;
US 18F Accessibility Guide

## Steps

### Step 1: Add a visible skip link as the first focusable element

```html
<!DOCTYPE html>
<html>
<head>...</head>
<body>
  <!-- First element in body — becomes first Tab stop -->
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <header>
    <nav>...15 navigation links...</nav>
  </header>

  <main id="main-content" tabindex="-1">
    <!-- tabindex="-1" allows programmatic focus on non-interactive element -->
    <h1>Page Title</h1>
    ...
  </main>
</body>
</html>
```

```css
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 9999;
  text-decoration: none;
  font-weight: bold;
}

.skip-link:focus {
  top: 0;   /* becomes visible only on keyboard focus */
}
```

The skip link must be visible when focused — a skip link hidden on focus fails WCAG
2.4.1. Some implementations keep it always visible; showing on focus is acceptable.

### Step 2: Set a unique, descriptive `<title>` on every page

```html
<!-- Wrong — identical titles on every page -->
<title>Acme Corp</title>

<!-- Right — page purpose first, site name second -->
<title>Order Confirmation — Acme Corp</title>
<title>Shopping Cart (3 items) — Acme Corp</title>
<title>404 Page Not Found — Acme Corp</title>
```

Screen readers announce the page title immediately on load. Format: `[Page Purpose] — [Site Name]`.
In SPAs, update `document.title` on every route change.

### Step 3: Write descriptive link text — no "click here" or "read more"

```html
<!-- Wrong — identical text, no context -->
<a href="/order/1">Read more</a>
<a href="/order/2">Read more</a>

<!-- Right — each link describes its destination -->
<a href="/order/1">View order #4821 (placed June 10)</a>
<a href="/order/2">View order #4820 (placed June 8)</a>

<!-- When visual context makes short text acceptable, use aria-label -->
<a href="/order/1" aria-label="View order #4821">Details</a>
```

Screen reader users often navigate a page by listing all links. A list of "read more ×
20" is meaningless. Each link must describe its destination in isolation.

### Step 4: Add multiple skip links for pages with several major sections

```html
<nav aria-label="Skip links" class="skip-links">
  <a href="#main-content">Skip to main content</a>
  <a href="#search">Skip to search</a>
  <a href="#site-footer">Skip to footer</a>
</nav>
```

For complex pages (e-commerce, dashboards), multiple skip targets reduce Tab distance
to any major section.

### Step 5: Test skip link behavior in a browser

```
1. Open page in Chrome/Firefox
2. Press Tab — skip link should become visible
3. Press Enter — page should scroll and focus should move to #main-content
4. Press Tab again — focus should continue from main content, not from nav
```

Verify `tabindex="-1"` is on the target element — without it, focus moves to the
anchor but subsequent Tab presses restart from the top of the DOM.

## When NOT to Use

- **Single-page apps with no navigation repetition** — if each view has no repeated header/nav, a skip link adds no value. Still set a meaningful `document.title` per view.
- **Pages with only 1–3 navigation links** — the effort to Tab past 3 links is minimal. A skip link becomes useful at ~5+ repeated interactive elements before main content.

## Common Mistakes

**Skip link that is permanently hidden.** `display: none` or `visibility: hidden` removes the skip link from the tab order entirely. Use off-screen positioning (`top: -40px`) that moves on-screen on `:focus`.

**Linking to an anchor without `tabindex="-1"` on the target.** Clicking the skip link scrolls to the target, but keyboard Tab focus continues from the last focusable element before the skip link — not from the target. Add `tabindex="-1"` to the target `<main>` or `<div>`.

**"Click here" links.** 34% of screen reader users navigate by links list. "Click here × 20" is indistinguishable. Every link text must identify its destination without surrounding context.