2.4.1 Bypass Blocks

Level: A | Principle: Operable | Since: WCAG 2.0 | Automation: Partial (axe-core)

What This Means

Users must be able to skip past repeated content blocks (like navigation menus) and jump directly to the main content. Keyboard users who cannot use a mouse must tab through every link in the navigation on every page — unless a skip mechanism exists.

Who This Affects

Keyboard-only users — must tab through dozens of nav links before reaching content
Screen reader users — navigation is announced every time the page loads
Switch device users — limited input methods make repeated navigation exhausting

Common Pitfalls

1. No skip link at all

The most common failure — the page has no mechanism to bypass navigation.

2. Skip link exists but isn't the first focusable element

<!-- Bad: skip link buried after navigation -->
<nav>...</nav>
<a href="#main">Skip to content</a>

<!-- Good: skip link is the very first focusable element -->
<a href="#main" class="skip-link">Skip to main content</a>
<nav>...</nav>
<main id="main">...</main>

3. No `<main>` landmark

Screen readers use landmarks to jump between sections. Without <main>, there's no way to skip to the content.

<!-- Bad: no landmark -->
<div class="content">...</div>

<!-- Good -->
<main>...</main>

4. Multiple `<main>` landmarks

Only one <main> element per page. Multiple confuse assistive technology.

How to Fix

Skip link (best practice)

<body>
  <a href="#main-content" class="skip-link">
    Skip to main content
  </a>
  <nav><!-- site navigation --></nav>
  <main id="main-content">
    <!-- page content -->
  </main>
</body>

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px 16px;
  background: #000;
  color: #fff;
  z-index: 100;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

ARIA landmarks

Use semantic HTML elements which automatically create landmarks:

| Element | Landmark Role | |---------|--------------| | <header> | banner | | <nav> | navigation | | <main> | main | | <aside> | complementary | | <footer> | contentinfo |

How to Test

Load the page and press Tab once. Verify the first focusable element is a "Skip to main content" (or similar) link.
Press Enter on the skip link and confirm focus jumps past the navigation to the main content area.
Open DevTools and verify the page has exactly one <main> landmark element.
Open a screen reader and use the landmark navigation shortcut (VoiceOver: VO+U then select Landmarks; NVDA: D key) to confirm main, navigation, and banner landmarks are present.
Pass: A skip link is the first focusable element, it works correctly, and the page has proper landmark regions including one <main>.
Fail: No skip link exists, the skip link does not move focus past navigation, or the page lacks a <main> landmark.

axe-core Rules

| Rule | What It Checks | |------|---------------| | bypass | Page has a mechanism to bypass repeated blocks | | landmark-one-main | Page has exactly one <main> landmark | | region | All content is contained within landmarks |