patternjavascriptMajor
Skip navigation links — the first interactive element on every page
Viewed 0 times
WCAG 2.1 Level A
skip linkskip navigationkeyboard shortcutbypass blockWCAG 2.4.1
Problem
Keyboard-only users must press Tab through every navigation item to reach the main content on each new page load. On sites with large navbars this can require 20+ keystrokes before reaching the actual content.
Solution
Place a visually hidden 'Skip to main content' anchor as the very first focusable element. Make it visible on focus so sighted keyboard users also benefit.
// HTML
<a href="#main-content" class="skip-link">Skip to main content</a>
<nav>...</nav>
<main id="main-content" tabindex="-1">...</main>
// CSS — visible on focus, hidden otherwise
.skip-link {
position: absolute;
top: -100%;
left: 0;
background: #000;
color: #fff;
padding: 8px 16px;
z-index: 9999;
text-decoration: none;
}
.skip-link:focus {
top: 0;
}
// HTML
<a href="#main-content" class="skip-link">Skip to main content</a>
<nav>...</nav>
<main id="main-content" tabindex="-1">...</main>
// CSS — visible on focus, hidden otherwise
.skip-link {
position: absolute;
top: -100%;
left: 0;
background: #000;
color: #fff;
padding: 8px 16px;
z-index: 9999;
text-decoration: none;
}
.skip-link:focus {
top: 0;
}
Why
WCAG 2.4.1 (Level A) requires a mechanism to bypass blocks of content repeated across pages. A skip link is the simplest and most universally supported solution.
Gotchas
- The target element (<main>) must have tabindex='-1' or be natively focusable, otherwise Safari will not move focus to it
- Never use display:none or visibility:hidden on the skip link — use off-screen CSS so it remains in the accessibility tree
- In SPAs, re-trigger the skip link logic on route changes or programmatically move focus on navigation
- Multiple skip links (e.g., 'Skip to search', 'Skip to nav') are valid but list them in priority order
Context
Every webpage with repeated navigation that precedes main content
Revisions (0)
No revisions yet.