Fix · Moderate · should fix soon
How to fix: missing skip-to-main-content link
Tab on every page goes through 20+ nav items before reaching content. A skip link bypasses repeated content. Visible on focus, hidden otherwise.
- WCAG references
- 2.4.1
- Severity
- Moderate
What it looks like in the wild
Tab on every page goes through 20+ nav items before reaching content.
The screen-reader user, keyboard user, or low-vision user encountering this issue does not get an error message. The page just stops working for them. Which is why this kind of bug rarely shows up in your error tracker; it shows up in support tickets, lawsuits, and abandoned conversions.
Why it fails WCAG
A skip link bypasses repeated content. Visible on focus, hidden otherwise.
Map this back to 2.4.1 when you log the bug. Auditors and procurement teams expect that mapping; "broken" is not enough context.
The wrong pattern (avoid)
<body><nav>... 20 items ...</nav><main>Content</main>The right pattern (copy this)
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<nav>...</nav>
<main id="main" tabindex="-1">Content</main>
<style>
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; background: #000; color: #fff; padding: 8px 12px; }
</style>Notes from real audits
Always make skip link visible on focus; never permanently hidden.
Related fixes
How to fix: missing alt text on images
1.1.1
How to fix: low color contrast
1.4.3, 1.4.11
How to fix: form fields without labels
3.3.2, 1.3.1, 4.1.2
How to fix: missing H1 / wrong heading order
2.4.6, 1.3.1
WCAG 2.4.1 — Bypass Blocks
A mechanism is available to bypass blocks of content that are repeated on multiple pages.
All fix recipes
Browse fixes by severity
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.