skip-link
Web validation
A skip link is an in-page shortcut for people who rely on the keyboard or assistive technology. Placed before repeated content like navigation or menus, it lets you jump straight to the unique page content instead of tabbing through every link or menu item.
When the link’s target is not focusable, or is missing altogether, focus does not move, forcing users to navigate the entire header each time. Make the target element focusable (for example, with tabindex="-1").
Note: Some WebKit browsers require JavaScript to scroll the target into view.
Pass Patterns
Skip link before navigation
The skip link is the first interactive element, its target exists, and focus lands in main, which is focusable. The link is visually hidden until it gains focus.
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<header>
<!-- site header -->
</header>
<nav>
<!-- site navigation -->
</nav>
<main id="main" tabindex="-1">
<!-- page content -->
</main>
<style>
.skip-link {
position: absolute;
left: 0;
top: -999px;
}
.skip-link:focus {
left: 0;
top: 0;
padding: 4px;
background: #ffc;
border: 1px solid #900;
}
</style>
</body>Fail Patterns
Skip link target does not exist
The page offers a skip link, but the referenced target is missing, so activating the link does nothing.
<body>
<a href="#content" class="skip-link">Skip to main content</a>
<header>
<!-- site header -->
</header>
<nav>
<!-- site navigation -->
</nav>
<main>
<!-- page content -->
</main>
</body>Try It Yourself
Using a keyboard
- Open the page in a browser.
- Press the Tab key to reveal the skip link, then press Enter to activate it.
Expected result: The page focus moves to the main content, or to another content target on the page.
Actual result: The page focus does not move.
FAQ
Why is this validation considered a best practice?
WCAG allows several ways to bypass repeated blocks. A skip link is the simplest, most widely supported technique, so including one improves efficiency for keyboard and assistive-technology users even when other landmarks exist.
Why is this issue marked as Moderate?
Without a reliable skip link, users must traverse lengthy navigation on every page view. This slows workflow, increases cognitive load, and can discourage continued use, yet the page is still operable. The moderate rating reflects the tangible but non-blocking impact across modern browsers and assistive technologies.