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
- Target not focusable — tabindex=-1 required
- Hidden with display:none
- Only one skip link for complex pages
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>