Reviewed November 3, 2026

The Skip Link Test: Tab Once on Your Homepage and See Where You Land

A skip link is a small promise with three parts. It must be the first thing keyboard focus reaches on the page. It must become visible when focused, because a control nobody can see is a rumor. And its target must work: activating it moves focus, not just scroll position, to the main content, so the next tab press continues inside the products rather than back in the navigation. WCAG 2.4.1, Bypass Blocks, is a Level A criterion, and this three part test on your homepage, a product page, and the checkout will tell you in five minutes whether your store honors it.

Storefront headers are long. Thirty to sixty tab stops of navigation, search, account, cart, and promo mechanics stand between a keyboard user and the first product on every single page load. Sighted mouse users pay none of that cost. The skip link is the equalizer the standard demands, and it is embarrassing how many premium themes ship one that is present in the code and broken in each of the three ways that matter.

The failures are mundane. The link exists but a promo banner script inserts itself earlier in the tab order. The link is styled to appear only in a way a theme update quietly broke. The link scrolls the page but leaves focus at the top, so the next tab walks the entire header anyway, which is the cruelest version because it looks fixed in a screenshot.

Why focus must move, not just the scroll position

Keyboard navigation continues from the focused element. If activating the skip link only scrolls the viewport to the main content while focus remains on the link at the top of the DOM, the following tab press dutifully moves to the second header element and the user resumes the long walk, now with a confusing view. Correct implementations put a tabindex of minus one on the main landmark or heading and direct focus to it.

Test it by consequence, not by appearance. Activate the link, then press tab once and ask where you are. If the answer is the first link or heading inside the main content, the link works. If the answer is anywhere in the header, it does not, regardless of how the page looks scrolled.

The visibility compromise, done right

Design teams resist skip links because a stray text link at the top of a luxury homepage offends the layout. The settled compromise is visually hidden until focused: off screen or clipped for mouse users, fully visible with strong contrast the moment it receives keyboard focus. That pattern satisfies both the design review and the criterion, since 2.4.1 cares about the keyboard experience.

Where implementations stumble is the hidden half. Techniques that use display none or visibility hidden remove the link from the tab order entirely, hiding it from the people it serves. The correct hiding keeps the element focusable, positioned off screen or clipped to a pixel, then restores it on focus. If your tab test never surfaces the link at all, suspect the hiding method before anything else.

One link or several, and where they should point

A single skip to main content covers most storefront templates. Long pages with repeated blocks beyond the header, a mega footer with eighty links, for instance, benefit from a second bypass, and some stores add skip to footer or skip to cart on cart adjacent pages. Each added link is another first impression for a keyboard user; keep the set small, ordered, and named by destination.

Point the link at the content that is unique to the page: the product detail on a product page, the results on search and collection pages, the form on checkout. A skip link that lands on a generic wrapper above a page specific breadcrumb and filter bar has skipped the header and kept the toll. The destination is a judgment call; make it deliberately per template, not once for the theme.

Frequently asked questions

Is a skip link required if my header is small?

The criterion requires a mechanism to bypass blocks repeated across pages, and even a modest header repeats on every page. A skip link is the standard mechanism and the cheapest to implement well. Very small sites occasionally meet the requirement with heading and landmark structure alone, but a storefront header rarely qualifies as small.

Should the skip link be visible all the time?

It does not need to be. Visible on focus is the accepted pattern and the one most real stores use. What is not acceptable is a link that stays invisible while focused, because keyboard users then navigate by faith for the most important jump on the page.

How many tab stops before content is too many?

There is no number in the standard; the criterion is about providing the bypass, not capping header size. In practice, if your header runs past a dozen or so stops, the skip link is load bearing and should be tested like checkout code, on every release.

What target should the skip link point to?

The main landmark or the page's main heading, made programmatically focusable with tabindex minus one so focus itself relocates. Point at the start of the unique content for that template, past breadcrumbs and repeated toolbars, not merely past the visual header.