WCAG 2.2 - Success Criterion
2.4.1 Bypass Blocks
Description
A mechanism must be available to allow users to skip blocks of content that are repeated on multiple pages, such as navigation menus, headers, and advertising sidebars. This criterion primarily benefits keyboard-only users and screen reader users, who must otherwise tab through every link in a navigation bar on every page before reaching the main content. The most common and recommended technique is a "skip to main content" link as the first focusable element on the page.
How To Test
- Load the page and press Tab once - the very first focusable item should be a "Skip to main content" link (it may only appear visually when focused).
- Press Enter to activate the skip link and verify that keyboard focus moves to the main content area.
- Confirm focus lands in or immediately before the main content, not back at the top of the page.
- Inspect the page with a screen reader (NVDA + Firefox or JAWS + Chrome) and use the H key to navigate by headings; verify there is a clear heading structure that also enables efficient navigation.
- Check that the main content region uses a
<main>landmark orrole="main"so screen reader users can jump directly using landmark navigation.
Testing Tools
- axe DevTools — Scan for missing skip links and page title issues.
- Lighthouse — Audit to check page title presence and uniqueness.
- NVDA — Screen reader to verify skip link is announced and page title is read on load.
Demo
There is no skip link. Keyboard users must Tab through all five navigation links before reaching main content.
Main content area
A skip link is the first focusable element. Tab to it then press Enter to jump directly to main content, bypassing all navigation.
Skip to main contentMain content area
Code
Skip link is positioned off-screen and never becomes visible, even when focused. The main content area is not focusable, so focus does not move when the link is activated.
Skip to main contentMain content - focus cannot reach this element
Skip link becomes visible on keyboard focus with clear visual indicator. When activated, focus moves to a focusable main content element with tabindex="0".
Skip to main contentMain content - keyboard focus moves here
Code
Page has semantic landmarks and heading structure, but no skip link and no aria-labels on navigation. Keyboard and screen reader users must navigate through the content in order.
Main Content
This is the main article. Users without a skip link must Tab through all nav links to reach here.
Section Heading
Supporting content. Screen reader users may use H key to jump by headings, but keyboard Tab users must navigate sequentially.
Passing: All three bypass mechanisms are present. Users can choose the method that works best for them.
Skip to main contentMain Content
Multiple bypass options: skip link (keyboard), landmark (screen reader), heading navigation (both). Users in control of how they navigate.
Section Heading
Supporting content. Screen readers announce <main> landmark and H2 heading. Keyboard users can Tab from skip link directly to main content.
Code
Fail Explanation
A failure occurs when a page that shares repeated blocks of content with other pages (such as a global navigation with 30 links) provides no skip mechanism. Keyboard-only users must press Tab dozens of times to reach the first piece of main content on every page load. For screen reader users, this means hearing the entire navigation read aloud before reaching the relevant content, which is extremely inefficient and fatiguing over repeated use.
Pass Explanation
A passing implementation includes a "Skip to main content" link that is the first focusable element in the DOM and points to a valid in-page anchor on the main content region. This link may be visually hidden until it receives keyboard focus (using a CSS off-screen technique), provided it becomes visible when focused. Alternatively, a proper heading hierarchy or landmark structure (using <main>, <nav>, etc.) may serve as a bypass mechanism in some browser/screen reader combinations, but a skip link is the most universally supported approach.
Notes
The skip link target must be a real focusable element or have tabindex="-1" applied to receive programmatic focus - simply linking to an anchor on a non-focusable element like a <div> or <h1> may not move focus in all browsers. Testing with actual keyboard navigation is essential because automated tools often cannot verify whether a skip link functions correctly.
Techniques
WCAG techniques used in this demo: G1, H69, H70
Suggested Solutions & References
Curated from 10 real-world audit findings and official WCAG guidance.