WCAG 2.4.1 — Bypass Blocks

What this requires

A mechanism must be available to bypass blocks of content that are repeated on multiple pages. The most common implementation is a "skip to main content" link as the first focusable element on each page. Other valid mechanisms: a properly marked <main> landmark that AT users can jump to, or in-page navigation via heading structure.

How AI coding tools fail this

When asked to "build the layout" or "add a header and sidebar", AI tools wire the markup correctly but skip the skip link. The <main> landmark sometimes appears (depending on framework conventions), but a visible skip link almost never does.

The second pattern: skip links that are present but visually hidden even on focus. The user tabs to the skip link, sees nothing, and either tabs away or hits Enter blindly. Skip links must become visible when they receive focus.

The third: skip-link targets without tabIndex={-1}. When the link fires, focus moves to the URL fragment but not into the target container, so the next Tab returns to the top of the page.

Failing examples

A layout with no skip link:

<>
  <header>{/* logo + nav */}</header>
  <aside>{/* sidebar */}</aside>
  <main>{children}</main>
</>

A skip link that stays invisible on focus:

<a href="#main" className="sr-only">
  Skip to main content
</a>

Passing examples

A visible-on-focus skip link as the first focusable element:

<>
  <a
    href="#main"
    className="sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-foreground focus:ring-2 focus:ring-primary"
  >
    Skip to main content
  </a>
  <header>{/* ... */}</header>
  <aside>{/* ... */}</aside>
  <main id="main" tabIndex={-1}>
    {children}
  </main>
</>

tabIndex={-1} on the target lets the link move focus into the element when clicked, so the next Tab continues from inside <main>.

Edge cases

<main> landmark alone satisfies the criterion technically, because AT users can jump to landmarks. But not every keyboard user uses AT — and the visible skip link helps sighted keyboard users too. Provide both.
Multi-pane layouts (sidebar + main + secondary panel) may need more than one skip target — "skip to main", "skip to side panel".
Skip link must be first. It can't appear after a logo link or a banner — the whole point is to bypass everything else.
Focus styling on the target. When the user follows the skip link, the target should show a visible focus indicator (see 2.4.7).
Single-page apps still need a skip link, and the link should work across route changes (the target should re-focus on route change to a new main view).

How Jeikin handles this

axe-core flags pages with no skip link and pages with no <main> landmark, mapping each to WCAG 2.4.1. The dashboard records the finding and reopens it on regressions when the skip-link target's tabIndex disappears or the link is removed.