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
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.