2.4.1 Bypass Blocks

Level A · added in WCAG 2.0

When blocks of content, such as the header and main navigation, repeat on many pages, users need a way to skip past them. Common methods are a skip link, landmark regions and headings.

Who it helps

Keyboard users would otherwise have to press Tab through every navigation link on every page before reaching the content. Screen reader users can jump by landmark or heading, and a skip link helps sighted keyboard and switch users too.

How to meet it

Add a "Skip to main content" link as the first focusable element on the page, pointing to the id of the main content.
Hide the skip link visually if you like, but make it appear when it receives keyboard focus; never hide it with display: none.
Wrap the main content in <main>, and use <header>, <nav> and <footer> for the repeated regions.
Start the main content with a heading, usually the page's <h1>, so screen reader users can jump straight to it.
Check that the skip link's target exists and that focus actually moves there, so the next Tab goes into the content.

Examples

Fails:The only skip link points to a missing id, and the page has no main landmark or headings to jump to

<a href="#content" class="skip-link">Skip to main content</a>
<nav><!-- 40 navigation links --></nav>
<div class="main">
  <p class="title">Pricing</p>
</div>

Fails:A skip link hidden with display: none can never receive focus; with no landmarks or headings, nothing else lets people skip

.skip-link { display: none; }

Passes:The skip link targets the main landmark, which has a matching id

<a href="#main" class="skip-link">Skip to main content</a>
<nav><!-- 40 navigation links --></nav>
<main id="main" tabindex="-1">
  <h1>Pricing</h1>
</main>

Passes:The skip link is off screen until it receives keyboard focus

.skip-link {
  position: absolute;
  left: 0;
  top: -100px;
}
.skip-link:focus { top: 0; }

Can a scanner detect this?

Partly

Automated tools check that a page has at least one bypass method: a landmark, a heading or an internal skip link. They cannot confirm that a skip link appears on focus and moves focus to the right place. Test it with the keyboard.

axe-core rules that test it

bypass

Common mistakes

Placing the skip link after the navigation, so users must tab through the menu to reach it.
Keeping the skip link hidden even when it has focus, so sighted keyboard users never see it (this also fails 2.4.7).
Using <div> wrappers for every region, so there are no landmarks to jump between.

Official W3C explanation of 2.4.1

Check your own page

See which automated WCAG checks your page fails, with the failing elements and how to fix them.

Reviewed November 2, 2026