Understanding WCAG 2.4.1.
What is it?
Every page needs a way for users to skip past blocks of content that repeat on every page, like navigation menus, site headers, and sidebars.
Ideally, that’s a “Skip to main content” link that keyboard users can press before they reach the navigation.
Why it matters
For those navigating your site with a keyboard, every page starts the same way: tab, tab, tab through your logo, your menu, your search bar, your account dropdown, and whatever else lives at the top.
Without a way to skip all that, they have to do it on every single page.
This affects people who:
- Navigate with a keyboard only
- Use screen readers and want to jump straight to the main content
- Use switch devices, where every press takes deliberate effort
Common failures
1. No skip link at all
Keyboard users load the page, press Tab, and land on the very first link in the header or navigation. Then they have to tab through every single link before they can reach the content. Every page. Every time.
2. A skip link that points to nothing
The link says “Skip to main content” but the target element doesn’t exist, or the href points to an ID that isn’t on the page. Activating it does nothing.
3. A skip link that’s hidden for everyone
The link exists in the HTML but it’s hidden with display: none or visibility: hidden. Both properties pull it out of the tab order completely. Keyboard users never reach it. Screen reader users never hear it.
4. A skip link that’s visually hidden but never appears
This time the link is hidden using clip-path or a similar technique that keeps it in the tab order. Screen readers can still find it. But it doesn’t become visible for keyboard users when it has focus. They’ll never know it’s there.
5. The skip link isn’t the first focusable element
It’s on the page, but it comes after the logo, the search bar, and the nav menu. By the time a keyboard user reaches the skip link, they’ve already tabbed through everything it was supposed to help them skip.
Solution
Add a skip link as the very first focusable element
Place it right after the opening body tag. When someone presses Tab for the first time, the skip link should be what gets focus.
<body>
<a href="#main" class="skip-link">
Skip to main content
</a>
<header>...</header>
<main id="main">
...
</main>
</body>
You’ll often see tabindex="-1" recommended on the target. Modern browsers no longer need it. See: matuzo.at/blog/2026/skip-links-tabindex
Make the skip link visible when focused
Visually hide it by default, then bring it back on focus. Keep it in the tab order (not display: none). Ensure it has a visible focus style.
.skip-link:not(:focus) {
clip-path: inset(50%);
height: 1px;
width: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}
.skip-link:focus {
position: fixed;
top: 0;
left: 0;
padding: 8px;
background: #000;
color: #fff;
outline: 3px solid blue;
}
What about landmarks?
Technically, landmarks are a sufficient technique for 2.4.1. But in practice, they don’t help keyboard-only users who still have to tab, tab, tab.
Use landmarks for screen reader users AND use skip links for keyboard users.
How to test
- Load a page on your site and press Tab once. Does a skip link appear with a clear focus indicator?
- Press Enter on the skip link. Does focus move to the main content?
- Try it on the homepage, a blog post, and a product page to see if the skip link works consistently.
- Scan your site with AAArdvark. It flags missing skip links and broken skip link targets.
Closing
Skip links are small. The impact is huge.
A keyboard user who visits ten pages on your site shouldn’t have to tab through the same navigation ten times.
WCAG 2.4.1 is about respecting people’s time and attention, one keystroke at a time.
Learn more
Read the full breakdown: a20y.com/wcag-plain-english/2-4-1-bypass-blocks/
Want more clear and actionable WCAG breakdowns? Check out wcagInPlainEnglish.com