• Success Criterion 2.4.1
  • Conformance level A

Skip Link That Jumps to the Wrong Part of the Page

2.4.1 — Bypass Blocks

Scenario

Setting

A recipe site's ingredient list

What’s wrong

Skip link points to wrong location (skips into mid-content or to footer).

Example 

<a href="#footer">Skip to content</a>
<!-- href actually points into the site footer -->

Why it matters

A cook using the skip link to reach the ingredient list instead lands in the footer, far from what they wanted.

How to test

Activate the skip link and check where focus lands: if it jumps into mid-content, the footer, or anywhere other than the true start of main content, it fails.

How to fix

Point the skip link at the actual content region and verify it lands there, not the footer.

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

Outcome

Activating the skip link, a cook lands directly at the ingredient list, ready to start cooking.

Who is affected

Keyboard users following the skip link end up disoriented in the wrong part of the page entirely.

Learn more

Related scenarios