Skip to content
StoreA11y

Shopify · 2.4.1 Bypass Blocks (Level A)

No way to skip repeated navigation on Shopify

The page offers no mechanism to skip past the header and menu. A keyboard-only shopper has to press Tab through every navigation link — often 30 or more — on every page before reaching the product. Missing skip links are named repeatedly in filed complaints.

Frequently litigated

A missing skip link is a standard allegation because it is trivially demonstrable in a video exhibit.

Which WCAG criterion this fails

  • Does not meet 2.4.1 Bypass Blocks (Level A)

How to fix it on Shopify

Everything below is done from Online Store > Themes > Edit code. Take a copy of the theme before editing.

  1. Add a skip link as the very first focusable element inside <body> in layout/theme.liquid.
  2. It must point at the id on <main> — #MainContent in Dawn and most derivatives.
  3. Style it off-screen by default and bring it back on :focus. Do not use display:none, which removes it from the tab order entirely and fixes nothing.
  4. Give <main> tabindex="-1" so focus actually lands there in Safari and older browsers.
  5. Test it: load the homepage, press Tab once, and the skip link should appear.

Where this usually lives

layout/theme.liquid (first element inside <body>), assets/base.css for the .skip-to-content-link rules

Paths given for Dawn and its derivatives (Sense, Craft, Refresh, Studio). A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

<body>
  <a class="skip-to-content-link" href="#MainContent">Skip to content</a>
  …

/* assets/base.css */
.skip-to-content-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
}
.skip-to-content-link:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.75rem 1rem;
  background: #fff;
  color: #000;
  outline: 2px solid currentColor;
}

How to confirm it is fixed

Re-run the scan. This rule should drop out of the findings entirely. If the instance count falls but does not reach zero, the same defect exists in another template — product cards and quick-view modals are the usual second home for it.

Effort: low. Rule id: bypass (axe-core).