Imagine pressing Tab 47 times to get past a navigation menu—on every single page. That's reality for keyboard users on sites without skip links.
What Are Skip Links?
Skip links are hidden links at the top of a page that become visible when focused. They let keyboard users bypass repetitive content and jump directly to the main content.
Why They Matter
Without skip links, keyboard users must Tab through every navigation link, header element, and sidebar item before reaching the page's main content.
Skip links are a WCAG 2.1 Level A requirement (success criterion 2.4.1: Bypass Blocks).
Basic Implementation
<body>
<a href="#main-content" class="skip-link">
Skip to main content
</a>
<header>
<nav><!-- Navigation links --></nav>
</header>
<main id="main-content">
<!-- Page content -->
</main>
</body>Styling Skip Links
.skip-link {
position: absolute;
left: -9999px;
background: #e6592b;
color: white;
padding: 8px 16px;
text-decoration: none;
z-index: 9999;
}
.skip-link:focus {
position: fixed;
top: 10px;
left: 10px;
}Making the Target Focusable
Add tabindex="-1" to the target:
<main id="main-content" tabindex="-1">
<!-- Content -->
</main>Testing Skip Links
- Load your page
- Press Tab—the skip link should appear
- Press Enter—focus should move to main content
- Press Tab again—focus should continue into main content
Common Mistakes
Link Goes Nowhere
Ensure the href matches an actual id in the page.
Target Not Focusable
Add tabindex="-1" to the target element.
Skip Link in Wrong Position
The skip link must be the first focusable element on the page.
A Quick Win
Skip links are one of the easiest accessibility features to implement—just a few lines of HTML and CSS. Yet they significantly improve the experience for keyboard users.
Run a free SiteDNA scan to check if your site has skip links and identify other accessibility improvements.