# Skip Links: The 30-Second Test That Catches Half of Keyboard Failures

Source: https://a11yshieldhq.com/blog/2026-11-09-skip-links-30-second-keyboard-test.html

November 9, 2026

*Press Tab once on your homepage. If the first thing you land on is not a skip link, your keyboard users are already losing. They will tab through every item in your header, your nav, your promo bar, and your search box before they reach a single word of content, on every page, on every visit.*

## What 2.4.1 actually requires

Success Criterion 2.4.1, Bypass Blocks, is Level A, which makes it one of the oldest and least negotiable rules in WCAG. It says a mechanism must exist to skip blocks of content repeated on multiple pages. A skip link is the usual mechanism, but landmarks and a good heading structure also count. The point is the same either way: a keyboard user should not have to wade through thirty to fifty navigation links to reach the thing they came for.

The test takes thirty seconds and no tools. Load the homepage, press Tab, and watch what gets focus first. A working skip link appears as the very first focusable element, usually reading Skip to main content. Press Enter and focus should move into the main content, not just scroll the page there. That distinction is where most skip links fail.

## The bug that breaks most skip links

The page scrolls but focus never moves. That is the number one skip link bug, and it happens because the target is not focusable. A plain  element cannot receive focus, so the browser scrolls to it and leaves keyboard focus sitting on the skip link itself. The next Tab press drops the user right back into the navigation they were trying to escape. The fix is one attribute: tabindex="-1" on the target element, which makes it focusable by script and by link without adding it to the tab order.

The second most common failure is a skip link that only exists on the homepage. A template change, a new landing page, or a checkout flow built outside the main theme can all ship without one, and nobody notices because mouse users never see it. Check the checkout and the account pages too, not just the homepage. Related reading: [Focus Not Obscured: Sticky Headers and the Keyboard](https://a11yshieldhq.com/blog/2026-11-06-focus-not-obscured-sticky-headers-keyboard.md).

The third pattern worth naming is the page with two skip links, or a skip link plus landmarks. A long page with a repeated sidebar can justify a second link, skip to main content and skip to search, for example, but each one has to work the same way, and each target needs its own tabindex. Landmarks help here too: a screen reader user can jump by landmark, and a page with a proper header, nav, main, and footer structure gives them a second route past the repetition. The skip link is the mechanism a keyboard user reaches for first. Landmarks are the backup for the user who navigates by structure instead of by tabbing.

## How to check yours right now

Open any page and press Tab. The skip link should be the first stop, visible when focused, and it should move focus, not just the viewport. Then press Tab again: the next stop should be inside the main content, not back in the header. If the link is invisible even on focus, that is a failure too, because a sighted keyboard user needs to see where they are. A link hidden with display: none until focus is fine; a link that never appears is not.

One more check for single-page apps: the skip link has to survive route changes. In a React or Vue storefront the main landmark often re-renders, and a skip link pointing at an id that no longer exists becomes a dead link that scrolls nowhere. Test it after navigating, not just on first load. For the heading side of the same problem, see [Heading Levels Are a Navigation Map for Screen Reader Users](https://a11yshieldhq.com/blog/2026-11-08-heading-levels-screen-reader-navigation-map.md).

## Frequently asked questions

### Does a skip link have to be visible all the time?

No. The usual pattern hides it off screen and reveals it when it receives keyboard focus. What matters is that a keyboard user can see it when they tab to it, and that it works when activated.

### Is a skip link enough to pass 2.4.1 on its own?

Yes, if it is present on every page with repeated blocks and it actually moves focus to the main content. Landmarks and headings are alternative mechanisms, but a working skip link is the simplest one to test.

### Why does focus stay behind after my skip link scrolls the page?

The target element is not focusable. Add tabindex="-1" to the main element so the link can move focus there without adding the element to the tab order.

### Do I need a skip link on every page?

Every page that repeats the same header and navigation, which is nearly every page on a storefront. Pages built outside the main template, like checkout or account flows, are the ones that most often ship without one.