2.4.1 Bypass Blocks

In Plain Language

Websites must provide a way for users to skip past repeated blocks of content (like navigation menus) and jump directly to the main content. The most common method is a "skip navigation" link that appears at the top of the page and becomes visible when it receives keyboard focus.

Landmark regions (<nav>, <main>, <aside>) also help screen reader users navigate between sections without tabbing through every element.

Why It Matters

Keyboard-only users must Tab through every link in the navigation before reaching the main content -- a skip link lets them bypass this on every page.
Screen reader users can navigate by landmark regions (<nav>, <main>, <aside>), but only if the page uses them.
Without bypass mechanisms, a page with 30 navigation links forces keyboard users to press Tab 30+ times before reaching the content they came for.
This affects 82.9% of home pages that either lack a skip link or do not use proper landmark regions.

Examples

Do: Skip navigation link

<body>
  <a href="#main-content" class="skip-link">
    Skip to main content
  </a>
  <header>
    <nav aria-label="Main navigation">...</nav>
  </header>
  <main id="main-content">
    <!-- Page content here -->
  </main>
</body>

Don't: No skip link or landmarks

How to Fix It

Add a skip link as the first focusable element on the page. It should link to the id of the main content area and become visible when it receives keyboard focus.
Use landmark elements -- <header>, <nav>, <main>, <aside>, and <footer> -- so screen reader users can jump between page regions.
Label multiple nav regions. If the page has more than one <nav>, give each an aria-label (e.g., aria-label="Main navigation" and aria-label="Footer links").
Ensure the skip link target has id and receives focus. Some browsers need tabindex="-1" on the target element for the focus to move correctly.