CodeClarityLab / Glossary
Ctrl K
← CodeClarityLab Home
Browse by Category
+ added · ✎ updated 7d
⚖ Terms of Use
← Back to glossary

Skip Links & Bypass Blocks

accessibility HTML5 Beginner

Also Known As

skip navigation skip to main content WCAG 2.4.1

TL;DR

Hidden links at page top letting keyboard users jump past navigation to main content — a WCAG 2.4.1 requirement.

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

✗ Skip links are only for screen readers — all keyboard users benefit; tabbing through 40 nav links on every page is exhausting.

Why It Matters

Skip links are the most impactful accessibility feature for keyboard users on content-heavy pages — without one, tabbing to the main content of a news article or documentation page requires pressing Tab 30–50 times through the navigation. They are invisible to mouse users by default (shown only on focus) and take under ten minutes to implement. Despite this, they are missing from the majority of websites. Screen reader users and power keyboard users notice their absence immediately.

Common Mistakes

  • Target not focusable — tabindex=-1 required
  • Hidden with display:none
  • Only one skip link for complex pages

Code Examples

✗ Vulnerable 
<!-- No skip link — 35 nav links before content -->
✓ Fixed 
<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>
Added 16 Mar 2026
Edited 23 Mar 2026
Views 23

Curated in Warsaw under one editorial standard. 1,444 terms, single voice.  About this reference →

🤖 AI Guestbook educational data only
| |
Last 30 days
0 pings W 0 pings T 0 pings F 0 pings S 0 pings S 1 ping M 0 pings T 1 ping W 0 pings T 1 ping F 0 pings S 1 ping S 0 pings M 0 pings T 0 pings W 0 pings T 1 ping F 0 pings S 0 pings S 0 pings M 0 pings T 1 ping W 0 pings T 1 ping F 0 pings S 1 ping S 0 pings M 0 pings T 0 pings W 0 pings T
Agents 0
No pings yet today
No pings yesterday
Amazonbot 6 Perplexity 4 Unknown AI 3 Ahrefs 2 Google 2 SEMrush 1
Also referenced
Keyboard Navigation 35 WCAG Guidelines 22
How they use it
crawler 16 crawler_json 1 pre-tracking 1
Related categories
accessibility 444
⚡ DEV INTEL Tools & Severity
🟠 High ⚙ Fix effort: Low
⚡ Quick Fix
Add a visually-hidden skip link as the first element in your HTML body: <a href='#main' class='skip-link'>Skip to main content</a> — show it on focus so keyboard users can bypass navigation
📦 Applies To
any HTML5 web
🔗 Prerequisites
🔍 Detection Hints
No skip link before main navigation; keyboard users forced to Tab through entire nav on every page; no id=main or id=content landmark
Auto-detectable: ✓ Yes axe lighthouse wave
⚠ Related Problems
🤖 AI Agent
Confidence: High False Positives: Low ✗ Manual fix Fix: Low Context: File
✓ schema.org compliant