• 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 

<a href="#main">Skip to content</a>
<div class="main">...</div>
<!-- no id="main" exists anywhere on the page -->

Why it matters

A keyboard shopper activates the skip link expecting to reach the product grid, but focus stays stuck at the top of the 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

Match the href to a real id and add tabindex="-1" so focus actually lands there.

<a class="skip-link" href="#main-content">Skip to content</a>
<main id="main-content" tabindex="-1">...</main>

Outcome

Activating the skip link, a shopper lands directly in the product grid as expected.

Who is affected

Keyboard users who rely on the skip link get no benefit since it silently fails to move focus anywhere.

Learn more

Related scenarios