• Success Criterion 2.4.1
  • Conformance level A

Skip Link Placed After the Navigation It’s Meant to Skip

2.4.1 — Bypass Blocks

Scenario

Setting

A news outlet's article page

What’s wrong

Skip link placed after the nav it's meant to skip.

Example 

<header><nav>...</nav></header>
<a href="#article">Skip to article</a>
<main id="article">...</main>

Why it matters

A reader must already tab through the entire navigation menu before ever reaching the skip link meant to bypass it.

How to test

Press Tab on load: if the skip link is positioned after the navigation block it's meant to skip, it fails to serve its purpose.

How to fix

The skip link must come before the block it's meant to bypass, not after it.

<body>
  <a class="skip-link" href="#article">Skip to article</a>
  <header><nav>...</nav></header>
  <main id="article" tabindex="-1">...</main>
</body>

Outcome

A reader's first tab press lands on the skip link and jumps straight to the article body.

Who is affected

Keyboard users get no time savings since the link they need comes only after the block it's supposed to skip.

Learn more

Related scenarios