Skip link

Quick win

Found on 3% of audited stores.

Add a valid, focusable target element (with a matching `id`) for every "Skip to main content" link so keyboard and assistive-technology users can bypass repeated navigation.

What it is

A "skip link" is a hidden (but keyboard-focusable) hyperlink that sits at the very top of every page, typically labeled "Skip to main content." When activated, it jumps the user past your navigation menus straight to the page's main content area. For this to work, the link's `href` must point to an element on the same page that actually exists and can receive focus — that element is the "skip link target." When the target is missing or has no matching `id`, the skip link goes nowhere, breaking the shortcut entirely.

Why it matters

Keyboard-only users (people who cannot use a mouse) and screen-reader users must tab through every navigation link on every page load if no working skip link exists — on a store with 20 nav items, that means 20 extra keystrokes to reach the first product. This is a WCAG 2.1 Level A failure (Success Criterion 2.4.1 — Bypass Blocks), meaning it exposes your store to accessibility complaints, lawsuits (ADA Title III in the US, EAA in the EU, AODA in Canada), and poor audit scores. Fixing it is a quick-win code change that immediately improves usability for millions of people who rely on keyboard navigation, and signals technical quality to accessibility auditors and automated scanners alike.

How to fix it

  1. Locate the skip link in your theme's HTML — it is usually the first anchor tag in the `<body>`, something like `<a href="#main-content" class="skip-link">Skip to main content</a>`.
  2. Find (or add) the HTML element that wraps your page's primary content — typically a `<main>` tag or a `<div>` containing your product listings, article body, etc.
  3. Give that element a matching `id` attribute: e.g., `<main id="main-content">` — the value must exactly match the fragment in the skip link's `href` (without the `#`).
  4. Ensure the target element can receive programmatic focus: native `<main>`, `<section>`, `<article>`, and `<div>` elements should have `tabindex="-1"` added so that browsers move focus to them correctly when the skip link is activated (without making them part of the normal tab order).
  5. Make the skip link visually hidden by default but visible on focus using CSS (position off-screen at rest; restore to visible when `:focus`). Do NOT use `display:none` or `visibility:hidden` — these make the link unfocusable.
  6. Test by opening the page, pressing Tab once, confirming the skip link appears and is focusable, pressing Enter, and verifying the browser jumps to and focuses the main content area (use a screen reader or browser dev tools to confirm focus moved).

Fix it on your platform

Pick your platform for the exact steps.

How to fix skip link on Shopify
  1. In your Shopify admin, go to Online Store → Themes → click the three-dot menu beside your active theme → Edit code.
  2. Open `layout/theme.liquid` (the root layout file that wraps every page).
  3. Near the very top of the `<body>`, locate or add a skip link: `<a class="skip-to-content-link" href="#MainContent">Skip to main content</a>`.
  4. Search for your main content wrapper — in most Shopify themes it is a `<main>` tag. Add or confirm it has `id="MainContent"` and `tabindex="-1"`: `<main id="MainContent" class="main-content" tabindex="-1">`.
  5. Open `assets/base.css` (or your theme's primary CSS file) and add the visually-hidden-until-focused style for `.skip-to-content-link` (see code snippet below).
  6. Click Save, then preview the theme and press Tab once to confirm the skip link appears and, on Enter, moves focus to the `<main>` element. Most modern Shopify themes (Dawn, Sense, Craft) already include this pattern — verify the `id` values match.
Full Shopify guide →Official Shopify docs ↗
How to fix skip link on Shopify Plus
  1. Follow identical steps as Shopify above — `layout/theme.liquid` is the correct file for the skip link and main content target.
  2. If you use a custom checkout layout, also open `layout/checkout.liquid` (Shopify Plus only) and apply the same skip link + target pattern to the checkout page's main content wrapper.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix skip link on WooCommerce
  1. In your WordPress admin, go to Appearance → Theme File Editor (or use a child theme via FTP/SFTP).
  2. Open `header.php` in your active (child) theme. Immediately after the opening `<body>` tag, add: `<a class="skip-link screen-reader-text" href="#primary">Skip to main content</a>`.
  3. Open `index.php` (or `page.php`, `single.php` as appropriate) and find the main content wrapper. Ensure it reads: `<main id="primary" class="site-main" tabindex="-1">`.
  4. Many themes (Storefront, Astra, Kadence, GeneratePress) already include a skip link — search for `skip` in `header.php`. If found, just ensure the `href` fragment matches the `id` on the `<main>` element.
  5. Add the CSS for `.skip-link` to your child theme's `style.css` (see code snippet below).
  6. Alternatively, install the 'WP Accessibility' plugin (by Joe Dolson) — it adds a working skip link automatically without editing code.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix skip link on BigCommerce
  1. In your BigCommerce admin, go to Storefront → My Themes → click Customize on the active theme → click Edit Theme Files (Advanced).
  2. Open `templates/layout/base.html` (Cornerstone theme) — this is the root template wrapping all pages.
  3. Immediately after `<body ...>`, add: `<a class="skip-link" href="#main-content">Skip to main content</a>`.
  4. Find the `<main>` element (search for `<main`) and add `id="main-content" tabindex="-1"` to it.
  5. Open `assets/scss/components/foundation/skip-link.scss` (or your theme's main SCSS/CSS) and add the visually-hidden-until-focused CSS (see snippet below).
  6. Click Save & Apply, then test with keyboard Tab navigation on your storefront.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix skip link on Wix
  1. Wix's standard editor does not expose raw HTML for layout templates. The most reliable fix is to use the Wix Accessibility Wizard: in the Wix Editor, open the left panel → click the Accessibility icon (person icon) → run the Accessibility Wizard, which will flag missing skip links.
  2. If you are on Wix Studio (formerly Editor X), go to the Pages & Menus panel, select your Master Page, and add a 'Skip to Content' button element as the very first element in the DOM order, linking it to the anchor of your main content section.
  3. Set the skip link element's visibility to show only on keyboard focus using the Interactions panel: add a Focus interaction that changes the element's opacity/position from hidden to visible.
  4. For full HTML control, migrate to Wix Studio and use the Custom Code feature (Settings → Custom Code) to inject the skip link markup and CSS into the `<head>` / `<body>` — note this is advanced and may conflict with Wix's own DOM.
  5. Test by pressing Tab on the published site and verifying the skip link appears and its target is reachable.
Full Wix guide →Official Wix docs ↗
How to fix skip link on Wix Studio
  1. In Wix Studio, open the Master Page in the editor.
  2. Add a text/button element as the absolute first item in the page structure (Layer panel), label it 'Skip to main content', and set its link to a Page Section anchor named `#main-content`.
  3. Name the main content section's anchor `main-content` via the section settings panel.
  4. Use the Design panel to position the skip link off-screen by default (e.g., top: -9999px) and add a Focus state that brings it back on screen.
  5. Test on the published URL using the Tab key.
Full Wix Studio guide →Official Wix Studio docs ↗
How to fix skip link on Squarespace
  1. In Squarespace, go to Website → Pages → select any page → click Edit, then open Settings → Advanced → Page Header Code Injection.
  2. Alternatively, use the site-wide injection: Settings → Advanced → Code Injection → Header.
  3. Paste the skip link `<a>` tag and accompanying `<style>` block into the Header injection field (see code snippet below). The skip link will be injected on every page.
  4. Squarespace's main content area uses the selector `#page` or `#content` depending on the template. Inspect your live page with browser DevTools to identify the correct `id` of the main content wrapper, then match the `href` fragment to that `id`.
  5. Because Squarespace does not let you modify core template markup, add `tabindex="-1"` to the target element via JavaScript in the Footer Code Injection: `document.querySelector('#page, #content, main').setAttribute('tabindex', '-1');`
  6. Publish and test with keyboard Tab on the live site.
Full Squarespace guide →Official Squarespace docs ↗
How to fix skip link on Webflow
  1. In the Webflow Designer, open your site's global layout — select the Body element in the Navigator panel.
  2. Add a Link Block element as the very first child of the Body. Set its text to 'Skip to main content' and its href to `#main-content`.
  3. Select the element that wraps your main page content (often a Section or Div with class `main-content`). In the Element Settings panel, set its ID to `main-content`.
  4. Add a custom attribute `tabindex` with value `-1` to the main content element via the Element Settings → Custom Attributes panel.
  5. Style the skip link using Webflow's Style panel: set position to Fixed, top to -100%, then add an interaction or :focus state that sets top to 0 (use 'Element trigger → Focus' in the Interactions panel or add custom CSS in Project Settings → Custom Code → Head Code).
  6. Publish and test with keyboard Tab navigation on the published URL.
Full Webflow guide →Official Webflow docs ↗
How to fix skip link on Adobe Commerce (Magento)
  1. In your Magento theme, navigate to `app/design/frontend/<Vendor>/<theme>/Magento_Theme/templates/root.phtml` (or the equivalent file in your custom theme).
  2. Immediately after the opening `<body>` tag, add: `<a class="skip-link" href="#maincontent">Skip to main content</a>`.
  3. Open `app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default.xml` and ensure the main content wrapper block (usually `main` container) has `id="maincontent"` and `tabindex="-1"`.
  4. Alternatively, find `Magento_Theme::html/container.phtml` or the `columns.phtml` template that renders `<main>` and set those attributes directly.
  5. Add the CSS for `.skip-link` to your theme's `web/css/source/_module.less` or equivalent SCSS file (see code snippet below).
  6. Run `bin/magento setup:static-content:deploy` to compile assets, flush cache, and verify with keyboard testing on the frontend.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix skip link on Magento Open Source
  1. Follow the same steps as Adobe Commerce (Magento) above — the theme file structure and process are identical for Magento Open Source 2.x.
Full Magento Open Source guide →Official Magento Open Source docs ↗
How to fix skip link on PrestaShop
  1. In your PrestaShop back office, go to Design → Theme & Logo → click 'Use this theme' for your active theme, then access theme files via FTP at `themes/<your-theme>/templates/layouts/layout-full-width.tpl` (or `layout-both-columns.tpl`).
  2. Immediately after `{block name='hook_after_body_open_tag'}{/block}`, add: `<a class="skip-link" href="#main">Skip to main content</a>`.
  3. Locate the `<main>` element in the layout template and add `id="main" tabindex="-1"`.
  4. Add the skip link CSS to `themes/<your-theme>/assets/css/custom.css` (see snippet below).
  5. Clear the PrestaShop cache (Advanced Parameters → Performance → Clear cache) and test with keyboard navigation.
Full PrestaShop guide →Official PrestaShop docs ↗
How to fix skip link on OpenCart
  1. Via FTP, open your active theme's main layout file at `catalog/view/theme/<your-theme>/template/common/header.tpl` (or `header.twig` for OpenCart 3.x+).
  2. Add the skip link immediately after the opening `<body>` tag (which may be in `index.tpl` — check your theme structure).
  3. Add `id="main-content" tabindex="-1"` to the `<div>` or `<main>` element that wraps the page's primary content in your layout.
  4. Add the CSS for `.skip-link` to your theme's stylesheet.
  5. Refresh OPcache/file cache in the OpenCart admin and test with keyboard Tab.
Full OpenCart guide →Official OpenCart docs ↗
How to fix skip link on Ghost
  1. In your Ghost admin, go to Settings → Design → Customize → click 'Edit theme' (or download the theme zip, edit locally, and re-upload).
  2. Open `default.hbs` — the root layout template. Add the skip link immediately after `<body>`.
  3. Find your `<main>` element (often in `default.hbs` or a partial) and add `id="main-content" tabindex="-1"`.
  4. Add the CSS to `assets/css/screen.css`.
  5. Zip and re-upload the theme via Settings → Design → Upload theme, then test.
Full Ghost guide →Official Ghost docs ↗
How to fix skip link on Headless / Custom (I build in code)
  1. In your root layout component (e.g., `_app.jsx`, `layout.tsx`, `App.vue`, `app.html`), add a skip link as the very first rendered element inside `<body>`.
  2. Pass `href="#main-content"` (or your chosen fragment) to the anchor.
  3. In the component that renders your main content area, set `id="main-content"` and `tabindex={-1}` (React/JSX) or `tabindex="-1"` (HTML/Vue/Svelte) on the root element.
  4. Add the visually-hidden-until-focused CSS globally (see snippet below).
  5. For Next.js, place the skip link in `app/layout.tsx` or `pages/_app.tsx`; for Nuxt, use `app.vue` or a global layout file; for SvelteKit, use `src/routes/+layout.svelte`.
  6. Verify with keyboard Tab and a screen reader (NVDA+Firefox or VoiceOver+Safari).
Full Headless / Custom (I build in code) guide →Official Headless / Custom (I build in code) docs ↗
How to fix skip link on WordPress.org
  1. In wp-admin go to Appearance → Theme File Editor (or edit files locally via FTP/SSH — recommended for safety).
  2. Open header.php of your active (child) theme. Verify a skip link exists immediately after <body>: `<a class='skip-link screen-reader-text' href='#primary'>Skip to content</a>`. The exact fragment id varies by theme.
  3. Find the element in header.php, page.php, or index.php that opens the main content area and confirm it has the matching id (e.g. `<main id='primary' tabindex='-1'>`). Add the id and tabindex if missing.
  4. If you use a block theme (Full Site Editing), go to Appearance → Editor → Templates → edit the template part that wraps the Query Loop or Page Content block, switch to Code Editor view, and add the id attribute to the <main> tag.
Full WordPress.org guide →Official WordPress.org docs ↗

Does your site have this issue?

Run a free SEOLZ scan to find skip link — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Skip link?

A "skip link" is a hidden (but keyboard-focusable) hyperlink that sits at the very top of every page, typically labeled "Skip to main content." When activated, it jumps the user past your navigation menus straight to the page's main content area. For this to work, the link's `href` must point to an element on the same page that actually exists and can receive focus — that element is the "skip link target." When the target is missing or has no matching `id`, the skip link goes nowhere, breaking the shortcut entirely.

Why does skip link matter?

Keyboard-only users (people who cannot use a mouse) and screen-reader users must tab through every navigation link on every page load if no working skip link exists — on a store with 20 nav items, that means 20 extra keystrokes to reach the first product. This is a WCAG 2.1 Level A failure (Success Criterion 2.4.1 — Bypass Blocks), meaning it exposes your store to accessibility complaints, lawsuits (ADA Title III in the US, EAA in the EU, AODA in Canada), and poor audit scores. Fixing it is a quick-win code change that immediately improves usability for millions of people who rely on keyboard navigation, and signals technical quality to accessibility auditors and automated scanners alike.

How do I fix skip link?

Add a valid, focusable target element (with a matching `id`) for every "Skip to main content" link so keyboard and assistive-technology users can bypass repeated navigation.

Related Accessibility (WCAG) issues