• Success Criterion 2.4.1
  • Conformance level A

Page With No Way to Skip Repeated Navigation

2.4.1 — Bypass Blocks

Scenario

Setting

A ride-hailing app's trip booking screen

What’s wrong

The page repeats the same navigation menu and promo banner above the main content on every screen, with no skip link, landmark, or heading that lets a keyboard user jump past it.

Example 

<nav>...</nav>
<div class="promo-banner">...</div>
<form id="booking-form">...</form>
<!-- repeated at the top of every screen, no skip link -->

Why it matters

A keyboard user booking a ride must tab through the same menu and promo banner on every single screen of the flow.

How to test

Press Tab once on page load: check for a skip link or equivalent bypass mechanism — if nothing appears and no landmarks/headings substitute, it fails.

How to fix

Place the skip link as the very first focusable element on the page.

<a class="skip-link" href="#booking-form">Skip to booking form</a>
<nav>...</nav>
<div class="promo-banner">...</div>
<main id="booking-form" tabindex="-1">...</main>

Outcome

A rider jumps straight to the booking form on each screen instead of retabbing through the menu.

Who is affected

Keyboard-only users and screen reader users waste time and effort repeating the same tab sequence at every step.

Learn more

Related scenarios