Skip Links & Bypass Blocks
debt(d3/e1/b3/t5)
Closest to 'default linter catches the common case' (d3). The term's detection_hints list axe, lighthouse, and wave — all widely used accessibility audit tools that flag missing skip links automatically. These are broadly accessible (Lighthouse ships in Chrome DevTools) rather than specialist-only, so d3 fits better than d5.
Closest to 'one-line patch or single-call swap' (e1). The quick_fix is a single HTML element added as the first child of body plus a small CSS class to show on focus. This is a minimal, self-contained addition that touches no other code paths.
Closest to 'localised tax' (b3). The fix is a single element in one place (the site-wide layout/header template). Once added correctly it imposes no ongoing tax; the burden is limited to maintaining the target anchor ID if the page structure changes.
Closest to 'notable trap — a documented gotcha most devs eventually learn' (t5). The misconception field explicitly states developers think skip links only help screen readers, but all keyboard users benefit. Additionally, common_mistakes show non-obvious implementation traps: the target needs tabindex=-1 and the link must not be hidden with display:none. These are documented gotchas that catch most developers the first time.
Also Known As
TL;DR
Explanation
Skip links are the first focusable element, visually hidden until focused, linking to main content anchor. Without them keyboard users Tab through all navigation on every page. WCAG 2.1 SC 2.4.1 requires a mechanism to bypass repeated blocks. Implementation: position:absolute; left:-9999px becoming left:0 on :focus.
Common Misconception
Why It Matters
Common Mistakes
- Making skip links visible by default, cluttering the layout instead of hiding them until keyboard focus.
- Linking to a non-existent anchor or using JavaScript navigation instead of a proper href target, breaking keyboard functionality.
- Placing skip links after other focusable elements like logo links, forcing users to tab through them first and defeating the purpose.
- Using display:none or visibility:hidden for the hidden state, which removes it from the tab order entirely instead of just off-screen.
Code Examples
<!-- No skip link — 35 nav links before content --><a href="#main" class="skip-link">Skip to main content</a>
<main id="main" tabindex="-1">...</main>
<style>.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:1rem}</style>