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.
Scanned 9/8/2026
Install to Claude Code
Skills Directorynpx -y skills add jeffreytse/grimoire-core --skill apply-skip-navigation --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Apply Skip Navigation?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/jeffreytse-apply-skip-navigation)More formats (shields.io, HTML) on the badges page.
---
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.Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
