• Success Criterion 2.4.1
  • Conformance level A

No Skip Link, Landmarks, or Headings to Bypass Navigation

2.4.1 — Bypass Blocks

Scenario

Setting

A crowdfunding platform's campaign page

What’s wrong

No skip link, no landmarks (coded page regions), no headings — repeated header/nav must be traversed on every page.

Example 

<div class="header">...</div>
<div class="content">...</div>
<!-- no nav, main, or heading elements anywhere on the page -->

Why it matters

A backer browsing multiple campaigns must read through the full header text every time with no landmark to jump past it.

How to test

Press Tab once on page load: check whether any skip link, landmark navigation, or heading-based bypass exists at all — absence of all three fails.

How to fix

Add landmarks, a heading, and a skip link together, since each reinforces the others.

<a class="skip-link" href="#main">Skip to content</a>
<nav aria-label="Site">...</nav>
<main id="main" tabindex="-1"><h1>Campaign: Solar Lanterns for Rural Schools</h1>...</main>

Outcome

A backer reaches each campaign's details immediately instead of listening through the header every time.

Who is affected

Screen reader users have no landmarks or headings to jump to, so they must listen to the entire header each visit.

Learn more

Related scenarios