Reviewed November 5, 2026

The Skip Link: First in Tab Order or It Is Decoration

A skip link lets keyboard and screen reader users bypass repeated header navigation and jump straight to the main content. To work it must be the first focusable element in the page, become visible when focused, and point to a target that can receive focus, typically the main element with a tabindex of -1. Many storefront themes ship one that fails at least one of those three.

Tab through your store's homepage and count the presses before you can read anything. Logo, search, account, cart, six menu items, a submenu you cannot see opening, and the announcement bar's close button. Somewhere around press fifteen, a keyboard user reaches the product you are selling.

A skip link collapses that to one press. It is the oldest accessibility feature on the web, it costs almost nothing, and a surprising share of themes carry a broken copy of it, present in the code and useless in practice.

The three failure modes

First, order. If anything focusable sits before the skip link in the DOM, an announcement bar dismiss button or a chat launcher injected by script, the user tabs past the obstacle course before being offered the shortcut around it. The skip link has to win the race to first.

Second, visibility and target. A skip link styled to stay hidden when focused helps nobody sighted using a keyboard, and a link pointing at a main element that cannot receive focus in some browsers leaves focus stranded at the top even while the view jumps. The standard cure is a main landmark with id main and tabindex -1, plus a focus style that reveals the link clearly.

Why header bloat keeps raising the stakes

Every feature a store adds to the header adds tab stops before the content: currency selectors, loyalty widgets, search suggestions, second menus for wholesale. Fifteen stops became twenty five in a few redesigns without anyone deciding that. The skip link is the compensating control, and its importance grows with every widget the header absorbs.

Screen reader users get a related benefit, a fast route past repeated blocks, though landmarks and headings already help them. The person the skip link rescues most concretely is the sighted keyboard user, the one group with no alternative navigation layer at all.

Testing it in five minutes

Load the homepage, click into the address bar, and press Tab once. The skip link should appear, visibly, as the first stop. Activate it and press Tab again: focus should now be inside the main content, on the first link or control there, not back at the logo. Repeat on a product page and at checkout, because templates differ and apps inject focusable elements per template.

If the link never appears, look for it in the code before assuming it is absent. A link that exists but is permanently hidden by CSS is the most common finding, and it is a ten minute fix that a theme update probably introduced.

Frequently asked questions

Where should a skip link point?

To the main content landmark, usually a main element with a matching id and tabindex of -1 so it can receive programmatic focus in every browser. Pointing at a heading or a div without focus handling leaves focus at the top in some browsers.

Does a skip link need to be visible all the time?

No. The standard pattern hides it off screen until it receives keyboard focus, then reveals it prominently. What it cannot be is invisible while focused, which is a common theme bug and a WCAG focus visible problem.

How many skip links should a store have?

One to the main content is the baseline. Stores with heavy repeated blocks sometimes add skip to footer or skip to search, but extra links add tab stops of their own. Cover the main bypass first and add more only with a clear reason.

Do mobile users need skip links?

Skip links serve keyboard and switch users, which includes people using external keyboards or switches with tablets and phones. On touch alone there is no tab order, so the feature targets assistive input rather than the device class.