• 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