Bypass Blocks (skip navigation).

Accessibility WCAG 2.1/2.2 Automated Compliance

Keyboard users need a way to skip past repeated nav — saves hundreds of tab presses

What does this check test?

This check verifies that a mechanism is available to bypass blocks of content that are repeated on multiple pages, such as navigation menus, header regions, and sidebar panels. The most common implementation is a 'Skip to main content' link that appears as the first focusable element on the page and jumps keyboard focus past the navigation to the main content area. ARIA landmarks (`<nav>`, `<main>`, `<aside>`) also satisfy this criterion by letting screen reader users jump between page regions. This maps to WCAG 2.2 Success Criterion 2.4.1 (Level A).

Why does it matter?

A typical website header contains 20–50 navigation links. Without a skip mechanism, a keyboard-only user must tab through every single navigation link on every page load before reaching the main content. On a 30-page browsing session, that could mean 1,500+ unnecessary keystrokes. Screen reader users face an even worse experience — they hear every link announced sequentially. Skip navigation is one of the simplest and highest-impact accessibility improvements a site can make.

Who is affected?

Front-end developers implementing page templates and layouts, design system architects defining page structure components, and site-wide template maintainers. This is typically a one-time implementation in the base layout that benefits the entire site.

Where does this apply?

The base page template or layout component that wraps every page. The skip link should be the very first focusable element in the DOM (before the header/navigation), and the target should be the `<main>` element or the first heading in the main content area. Sites with multiple repeated blocks (sidebar, sub-navigation) may benefit from multiple skip links.

How to fix it

Add a skip link as the first element in `<body>` and use HTML5 landmarks so screen readers can jump between regions. Skip link HTML:

html

<body>
  <!-- First focusable element in the DOM -->
  <a href="#main-content" class="skip-link">
    Skip to main content
  </a>

  <header>...</header>
  <nav aria-label="Main">...</nav>

  <!-- tabindex="-1" allows programmatic focus -->
  <main id="main-content" tabindex="-1">
    <h1>Page Title</h1>
    ...
  </main>
  <footer>...</footer>
</body>

Skip link CSS (hidden until focused):

css

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
}
.skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  padding: 1rem;
  background: #000;
  color: #fff;
}

Automated tools like axe-core check for skip links and landmark regions.

References

AppVet checks Bypass Blocks (skip navigation) automatically

Run a free accessibility scan and get a full report with actionable fixes, including a Fix with AI prompt you can paste into any coding tool.

Run Audit

← All checks