• Success Criterion 2.4.1
  • Conformance level A

Landmarks Used as a Bypass but Missing Key Content

2.4.1 — Bypass Blocks

Scenario

Setting

A language-learning app's lesson screen

What’s wrong

Landmarks used as the mechanism but content sits outside main, or multiple identical unlabeled landmarks (coded page regions) defeat navigation.

Example 

<main><div class="sidebar">...</div></main>
<div class="lesson">...</div>
<nav>...</nav>
<nav>...</nav>

Why it matters

A screen reader user jumping to the main landmark lands in the sidebar and never reaches the actual lesson content.

How to test

Use a screen reader's landmarks list: if landmarks exist but content sits outside all of them, or several identical unlabeled landmarks appear, it fails as a bypass mechanism.

How to fix

Label each landmark uniquely and make sure main wraps the actual task content.

<nav aria-label="Lesson steps">...</nav>
<nav aria-label="Account">...</nav>
<main id="main" tabindex="-1"><h1>Lesson 4: Ordering Food</h1>...</main>

Outcome

A learner jumps to the main landmark and lands directly on the exercise they came to complete.

Who is affected

Screen reader users navigating by landmark are misled to the wrong region and must hunt manually for the lesson.

Learn more

Related scenarios