Standards · WCAG 2.2

SC 2.4.1 Level A WCAG 2.0

Bypass Blocks

Provide a way for keyboard and screen-reader users to skip over content that repeats on every page — typically the header, primary nav, and utility links — so they can reach the main content without tabbing through dozens of links.

What it asks

If the same block of content appears on multiple pages — masthead, primary navigation, mega-menu, breadcrumb bar, utility links — sighted mouse users skip past it instantly. Keyboard users have to tab through it every single time. Screen-reader users have to listen to it. The SC requires at least one mechanism that lets people jump straight to the main content.

WCAG accepts several mechanisms: a “skip to main content” link, proper landmark regions (<header>, <nav>, <main>, <footer>), or a real heading hierarchy that screen-reader users can navigate with the H key. In practice, a skip-link plus landmarks is the safe baseline.

How to meet it

  • Add a “Skip to main content” link as the first focusable element in the page. Make it visible on focus, not permanently hidden.
  • Point the skip-link href at the id of your <main> element, and add tabindex="-1" to <main> so the focus ring lands there in Safari.
  • Use real landmark elements: one <header>, one <nav> (or several with aria-label), one <main>, one <footer> per page.
  • Use a clean heading outline so JAWS and NVDA users can press H, 1, 2, 3 to jump.
  • If you have multiple repeated blocks (utility nav + primary nav + breadcrumbs), consider a second skip-link for the most painful one.

Common failures

  • Skip-link hidden with display: none instead of being moved off-screen and revealed on focus — assistive tech can’t find it.
  • Skip-link target lacks tabindex="-1", so Safari/WebKit ignores the jump and keeps focus on the skip-link.
  • <main> wrapped inside <nav> or duplicated several times on the page.
  • Heading hierarchy that skips levels (h1 → h4) or uses headings purely for visual sizing, breaking the H-key navigation strategy.
  • Sticky headers that overlap the focused element after the skip-link runs — see 2.4.11.

Why it matters

Bypass Blocks is the cheapest accessibility win on the list — a skip-link is roughly 10 lines of HTML and CSS — but the failure rate on production sites is still around 60% in WebAIM’s annual Million scan. For a keyboard-only user navigating a site with a 40-item mega-menu, having to tab through it on every page turn is exhausting and, on long browsing sessions, disabling.