Skip Links
Definition
Hidden links at the top of pages that let keyboard users jump directly to main content, bypassing repetitive navigation.
What are Skip Links?
Skip links are navigation shortcuts that let users jump directly to main content, bypassing repetitive elements like navigation menus and headers. They're typically hidden until a keyboard user tabs to them, then appear visibly.
For keyboard users, they're essential – otherwise they must tab through dozens of navigation links on every single page.
Why Skip Links Matter
Keyboard User Efficiency
Without skip links, keyboard users must tab through the entire navigation menu on every page view. On sites with extensive menus, this becomes exhausting.
Screen Reader Users
Screen reader users navigate by keyboard. Skip links save significant time when they know what content they want.
WCAG Requirement
Skip links (or an equivalent mechanism) are a Level A requirement under WCAG 2.1.
Better User Experience
Even sighted keyboard users benefit from quick navigation options.
How Skip Links Work
1. Hidden by Default
Skip links are typically hidden visually but present in the DOM and accessible to keyboard users.
2. Visible on Focus
When a user tabs to the skip link, it becomes visible.
3. Jump to Content
Clicking or pressing Enter moves focus to the main content area.
4. Hidden Again
After navigation or when focus moves elsewhere, the link hides again.
Implementing Skip Links
HTML Structure
<body>
Skip to main content
<nav>...</nav>
<main id="main-content" tabindex="-1">
<!-- Main content here -->
</main>
</body>
CSS
.skip-link {
position: absolute;
top: -40px;
left: 0;
padding: 8px 16px;
background: #000;
color: #fff;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
Multiple Skip Links
On complex pages, consider multiple skip targets:
- Skip to main content
- Skip to navigation
- Skip to search
- Skip to footer
Keep the list manageable – too many options defeats the purpose.
Common Skip Link Mistakes
Not Testing Focus Movement
The target element needs tabindex="-1" to receive focus properly.
Hiding from Screen Readers
Using display: none or visibility: hidden hides from screen readers too. Use positioning instead.
Broken Target IDs
Ensure the ID in the href matches the actual element ID.
Insufficient Visibility
When visible, skip links should be clearly noticeable, not tiny or low contrast.