• Success Criterion 2.4.1
  • Conformance level A

Bypass Mechanism With No Heading to Land On

2.4.1 — Bypass Blocks

Scenario

Setting

A music streaming app's playlist screen

What’s wrong

Headings used as the mechanism but the main content has no heading to jump to.

Example 

<h1>MusicStream</h1>
<main>
  <ul>...</ul>
</main>
<!-- no heading inside main -->

Why it matters

A screen reader user jumping by heading has nowhere to land inside the actual playlist content.

How to test

Use a screen reader's headings list to jump to main content: if there's no heading marking where main content starts, this bypass method fails.

How to fix

Give the main content region its own heading so heading-based navigation has a target.

<main id="main" tabindex="-1">
  <h1>Your Playlist</h1>
  <ul>...</ul>
</main>

Outcome

A user jumps by heading and lands right at the top of their playlist, not the site banner.

Who is affected

Screen reader users relying on heading navigation get no bypass since the destination region has no heading to target.

Learn more

Related scenarios