- Success Criterion 2.4.1
- Conformance level A
Skip Link That’s Broken and Doesn’t Actually Move Focus
2.4.1 — Bypass Blocks
Scenario
Setting
An online clothing store's product listing page
What’s wrong
Skip link present but broken: target id missing, or target not focusable so focus jumps back.
Example
<nav><!-- 20 links --></nav><main><!-- content --></main> Why it matters
Keyboard and screen-reader users who otherwise re-traverse repeated headers on every page.
How to test
Press Tab on load to reveal the skip link, then activate it: if the target id doesn't exist or isn't focusable, focus doesn't actually move and it fails.
How to fix
A working bypass (a skip link visible on focus, landmarks (coded page regions), or headings) must let users jump straight to the main content.
<a href="#main" class="skip-link">Skip to main content</a><nav><!-- 20 links --></nav><main id="main"><!-- content --></main>A skip link (or landmarks/headings) lets keyboard users bypass repeated navigation instead of tabbing through it every page.
Outcome
On an online clothing store's product listing page, this barrier is gone for keyboard and screen-reader users who otherwise re-traverse repeated headers on every page — they reach the same outcome without extra effort.
Who is affected
Keyboard and screen-reader users who otherwise re-traverse repeated headers on every page.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Page With No Way to Skip Repeated Navigation
- No Skip Link, Landmarks, or Headings to Bypass Navigation
- Skip Link That’s Never Visible, Even on Keyboard Focus
- Skip Link Placed After the Navigation It’s Meant to Skip
- Landmarks Used as a Bypass but Missing Key Content
- Bypass Mechanism With No Heading to Land On