What This Rule Checks
Skip links allow users, especially those relying on keyboard navigation, to bypass repetitive elements (like navigation menus) and jump directly to the main content. This feature greatly improves web accessibility, particularly for users with disabilities.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
Skip links are the primary mechanism for keyboard users to bypass repetitive navigation. A broken skip link (pointing to a non-focusable element) fails silently, leaving users to Tab through every navigation item on every page load.
How to Fix
To ensure your webpage has functional skip links:
Place Skip Links at the Top: Insert the skip link right after the opening <body> tag to allow users to skip navigation easily.
Ensure Focusable Targets: The link must direct users to a focusable element that allows them to skip over sections like navigation.
Cross-Browser Support: WebKit browsers (e.g., Safari and Chrome) may have issues with same-page links. Use JavaScript as a workaround for these browsers.
Make Skip Links Visible: Avoid hiding skip links entirely using display: none or visibility: hidden. These options make the link inaccessible to users who rely on keyboard navigation or screen readers. Instead, use CSS to hide the link offscreen until it receives focus.
Code Examples
<!-- Skip link to non-focusable target -->
<a href="#content" class="skip-link">
Skip to content
</a>
...
<div id="content">
Main content
</div>
Copy
<!-- Skip link to focusable target -->
<a href="#content" class="skip-link">
Skip to main content
</a>
...
<main id="content" tabindex="-1">
Main content
</main>
<style>
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px 16px;
z-index: 10000;
}
.skip-link:focus {
top: 0;
}
</style>
Copy
Common Mistakes to Avoid
- Pointing the skip link to an element without tabindex=”-1″.
- Permanently hiding the skip link with display:none instead of off-screen positioning.
- Not making the skip link visible when focused.
- Creating a skip link that jumps to the wrong location.
Tip: Keyboard navigation is essential for users who cannot use a mouse. Ensure all interactive elements are reachable via the Tab key and operable via Enter or Space. Test focus visibility and focus order on every page.