A skip link is a single anchor element that lets keyboard users bypass repetitive navigation and jump straight to a page's main content. It takes minutes to implement and dramatically improves the experience for every keyboard-only user.
1The Repetitive Navigation Problem
Nearly every website repeats the same header and navigation block across all its pages. For sighted mouse users this costs nothing ā their eyes jump past it instantly to the content they came for. For keyboard-only users, it's a different story: reaching the main content requires physically pressing Tab through every single link in that header, on every single page load.
WCAG's 2.4.1 Bypass Blocks success criterion exists specifically to address this, requiring a mechanism to skip repeated blocks of content ā and a visible skip link is the simplest, most universally understood way to satisfy it.
2Implementing A Correct Skip Link
The implementation is deliberately simple: an <a href="#main-content">Skip to main content</a> placed as the very first focusable element in the document, paired with a matching id="main-content" on the <main> element it targets.
On focus, most browsers scroll the target into view and, for non-focusable elements like a bare <main>, some implementations add tabindex="-1" to the target to guarantee focus actually lands there for screen reader announcement purposes, not just a visual scroll.
4Step-by-Step Breakdown
The One-Line Fix With Outsized Impact. Imagine tabbing through 40 navigation links on every single page before reaching the actual content. That's the reality for keyboard users on sites without a skip link ā a single, near-invisible anchor that jumps straight past repetitive navigation to the main content.
The Problem: Repetitive Navigation Blocks. Most sites repeat the same header, navigation menu, and sometimes a sidebar on every page. A mouse user's eye jumps past this instantly. A keyboard user must physically Tab through every single link in that block, every single page load, before reaching what they actually came for.
The Repetitive Navigation Problem. Why is repetitive header navigation a bigger burden for keyboard users than for mouse users?
- āKeyboard users can't see the navigation at all
- āKeyboard users must move through it sequentially, one Tab at a time, on every page
- āIt isn't actually a burden for anyone
Building A Skip Link. A skip link is simply an anchor tag pointing at the id of the main content region, placed as the very first focusable element in the DOM. It's typically visually hidden until it receives keyboard focus, at which point it becomes visible so sighted keyboard users can see it too.
Skip Link Placement. Where in the DOM should a skip link be placed for it to work correctly?
- āAt the very end of the document, near the footer
- āAs the very first focusable element in the document
- āAnywhere; position doesn't matter as long as the href is correct
Why It Should Be Visible On Focus, Never display:none. Skip links must be reachable and visible when focused ā using display:none would remove them from the tab sequence entirely, defeating their purpose for the sighted keyboard users who benefit most from seeing exactly where they've jumped.
Hiding Technique. Why must a skip link use an off-screen positioning technique instead of display:none for its hidden state?
- ādisplay:none is fine and commonly used
- ādisplay:none removes the element from the tab sequence, making it unreachable
- ādisplay:none has worse rendering performance
Skip Link Shipped. You now understand why skip links exist, how to build one correctly with proper off-screen-until-focused styling, and why this single-anchor pattern remains one of the highest-value, lowest-effort accessibility investments available.
Add A Skip-To-Content Link. A skip link lets keyboard users jump past repeated navigation straight to the main content.
Level Up š
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Skip Links Directly Satisfy WCAG 2.4.1 Bypass Blocks
The success criterion explicitly calls for a mechanism to bypass repeated content blocks, and a visible-on-focus skip link is the simplest, most broadly recognized way to satisfy it.
2A Skip Link's Value Depends Entirely On Correct Focus-Visibility Styling
A skip link hidden with display:none is functionally absent ā it must remain in the tab sequence and become visible on focus to actually help anyone.
SEO Implications
- 1
Skip Links Have Negligible Direct SEO Weight But Reinforce Good Structure
They don't influence rankings directly, but implementing them correctly usually means a project already has a properly identified <main> landmark, which does help crawlers understand page structure.
Best Practices
Always Place The Skip Link As The Very First Focusable Element
It only helps if it's the first thing a keyboard user reaches on their very first Tab press ā placed anywhere later, users would need to already know it exists and tab past other content to find it.
Use Off-Screen Positioning, Never display:none, For The Hidden State
display:none removes the link from the tab sequence entirely, making it permanently unreachable and silently defeating the entire feature.
Frequent Bugs
A site has a skip link in the code, but keyboard users never see or can reach it.
The link is likely hidden with display:none or visibility:hidden instead of off-screen positioning. Switch to a technique that keeps it in the tab sequence and reveals it on :focus.
Clicking/activating the skip link scrolls the page but the screen reader doesn't announce the new location.
The target element (often <main>) isn't programmatically focusable. Add tabindex="-1" to it so focus, not just scroll position, actually moves there.
Real-World Examples
Standard Skip Link Pattern
The de facto standard implementation used across the vast majority of accessible production sites.
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<header>...</header>
<main id="main" tabindex="-1">...</main>
</body>