How to fix: Missing skip navigation link
Give keyboard users a way to jump past repeated navigation, either a "Skip to content" link near the top of the page that targets the main content, a <main> landmark, or both.
What it is
A skip link is a link, usually the first focusable thing on the page, that jumps focus straight to the main content and lets a keyboard user bypass the header and navigation. WCAG Success Criterion 2.4.1 Bypass Blocks requires a mechanism to skip over blocks of content that repeat across pages, and a skip link is the classic way to provide one. A <main> landmark is another accepted mechanism, because assistive technology can jump to it directly.
Without either, a keyboard or screen reader user has to tab through every navigation item, every dropdown, and every header control on every page before they reach the actual content. On a site with a large menu, that can be dozens of tab presses repeated on every single page view, which is exhausting and slow.
Skip links are commonly visually hidden until focused: they sit off-screen with a class like sr-only and slide into view when a keyboard user tabs to them, so they help assistive-technology users without cluttering the visual design. Pairing a skip link with a proper <main> landmark covers both the keyboard and the landmark-navigation paths at once.
Who it affects & why it matters
Keyboard-only users (including many people with motor disabilities who cannot use a mouse) are affected directly: with no skip mechanism, every page forces them to tab through the entire repeated navigation before reaching content.
Screen reader users are affected too. They often jump by landmarks, so a missing <main> removes a primary shortcut to the content, and switch-device and other slow-input users feel the cost of repeated navigation most acutely, since each extra stop multiplies their effort.
A missing bypass mechanism is a Level A failure under SC 2.4.1, the most fundamental tier. WCAG 2.1 Level AA, which courts and the U.S. Department of Justice treat as the ADA benchmark, includes every Level A criterion, so this sits inside the standard applied to ADA Title III website claims.
Web accessibility lawsuits continue to rise and overwhelmingly target businesses under $25 million in revenue, and keyboard-access barriers, lack of keyboard navigation among them, are repeatedly cited in those complaints. The fix is cheap and durable: a single skip link in your layout template plus a <main> landmark protects every page on the site at once.
How to fix it
- Add a skip link as the first focusable element in the page, for example <a href="#main" class="sr-only">Skip to content</a>.
- Give the main content region an id (and ideally wrap it in a <main> element) so the skip link's href has a target to jump to.
- Style the skip link to be visually hidden by default and clearly visible when it receives keyboard focus, so it appears only when needed.
- Wrap your primary content in a <main> (or [role="main"]) landmark so screen reader users can also jump to it by landmark.
- Tab from the very top of the page to confirm the skip link appears first and moves focus into the content, then re-scan.
<body>
<header>
<nav> ... lots of links ... </nav>
</header>
<div class="content"> ... </div>
</body><body>
<a href="#main" class="sr-only">Skip to content</a>
<header>
<nav> ... lots of links ... </nav>
</header>
<main id="main"> ... </main>
</body>How AccessKnight detects this
AccessKnight checks the page once and only flags it when two conditions are both true. First, it looks at every in-page anchor (links whose href starts with #) and checks whether any of their text contains the word "skip"; if one does, the page passes. Second, it checks whether the document contains a <main> element or any element with role="main"; if it finds one, the page passes. The issue is reported only when there is neither a skip-style anchor nor a main landmark, so adding either a skip link or a <main> resolves it.