SEOLZ

Skip link

Quick win

Found on 1% of audited stores.

Add a valid, matching target ID to every skip-navigation link so keyboard and assistive-technology users can bypass repeated header content and jump directly to the main content area.

What it is

A "skip link" is a hidden (or visually shown on focus) hyperlink placed at the very top of a webpage that lets keyboard and screen-reader users jump past the navigation menu straight to the main content. It looks like `<a href="#main-content">Skip to main content</a>` and works by pointing to an element with a matching `id`, for example `<main id="main-content">`. The "no skip link target" issue means the skip link exists in your HTML but the element it points to — the `id` it references — is either missing, mismatched, or not present in the page at all, so the link goes nowhere.

Why it matters

Without a working skip link, anyone who navigates your store using only a keyboard (or a screen reader) must tab through every menu item, logo link, search box, and utility icon on every single page before reaching a product listing or article — a frustrating experience that can cause them to abandon your site entirely. This directly affects customers with motor disabilities, visual impairments, and anyone who relies on assistive technology. Under WCAG 2.1 Success Criterion 2.4.1 (Bypass Blocks, Level A — the lowest, most required level), a broken skip link is a conformance failure that can expose your business to accessibility complaints or legal action in jurisdictions that require web accessibility (including the US ADA, UK Equality Act, and EU EAA). Fixing it also signals technical quality to Google's crawlers and improves perceived page experience.

How to fix it

  1. Locate the existing skip link in your theme's HTML — it is usually the very first `<a>` tag inside `<body>`, often reading 'Skip to main content' or 'Skip to content'. Note the `href` value (e.g. `href="#main-content"` or `href="#content"`).
  2. Find the element on the page that should receive keyboard focus after the skip — almost always the opening `<main>` tag, or a wrapping `<div>` that contains the page's primary content (below the header and nav).
  3. Add the `id` attribute to that target element so it exactly matches the skip link's `href` fragment — e.g. `<main id="main-content">`. The value must be unique on the page and must not contain spaces.
  4. If the target element is not a natively focusable element (i.e. it is a `<div>` or `<section>` rather than `<main>`), also add `tabindex="-1"` so browsers move focus correctly on click: `<div id="main-content" tabindex="-1">`.
  5. Save and reload the page. Press Tab once — the skip link should appear (or already be visible). Press Enter — focus and the viewport should jump past the navigation to the main content area.
  6. Test with a screen reader (NVDA + Chrome, JAWS + Chrome, or VoiceOver + Safari) to confirm the skip link is announced and activating it moves reading position to the main content.
<!-- 1. Skip link — place as the very first element inside <body> -->
<a class="skip-link" href="#main-content">Skip to main content</a>

<!-- 2. Target — the opening tag of your main content area -->
<main id="main-content" tabindex="-1">
  <!-- page content here -->
</main>

<!-- 3. Minimum CSS to show the link only on keyboard focus -->
<style>
  .skip-link {
    position: absolute;
    top: -9999px;
    left: 0;
    z-index: 9999;
  }
  .skip-link:focus {
    top: 0;
    padding: 8px 16px;
    background: #000;
    color: #fff;
    text-decoration: none;
  }
</style>

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 → your active theme → Actions → Edit code.
  2. Open Layout → theme.liquid (or the equivalent base layout file).
  3. Immediately after the opening <body> tag, confirm a skip link exists — it often reads `<a class="skip-to-content-link" href="#MainContent">{{ 'accessibility.skip_to_text' | t }}</a>` in Dawn and most modern themes.
  4. Search the file (Ctrl+F) for the `id` referenced in that href (e.g. `MainContent`). In Dawn, the `<main>` tag carries `id="MainContent"` — verify it is present and spelled identically (case-sensitive).
  5. If the id is missing, find the opening `<main>` tag in theme.liquid (or in sections/header.liquid / templates/) and add `id="MainContent" tabindex="-1"`.
  6. If your theme uses a different fragment (e.g. `#content`), make the skip link href and the target id match exactly, then Save.
Full Shopify guide →Official Shopify docs ↗
How to fix skip link on Shopify Plus
  1. Follow the same steps as Shopify above — Shopify Plus uses the same theme architecture.
  2. If you use a custom Hydrogen/Oxygen storefront, edit the root Layout component (app/components/Layout.tsx or Layout.jsx): add `<a href='#main-content' className='skip-link'>Skip to main content</a>` as the first child of <body>, and add `id='main-content' tabindex={-1}` to the <main> element.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix skip link on WooCommerce
  1. The skip link and its target live in your active WordPress theme. In wp-admin go to Appearance → Theme File Editor (or use a local editor / child theme).
  2. Open header.php. Look for an existing skip link near the top — Storefront theme includes `<a class="skip-link screen-reader-text" href="#content">{{ __('Skip to content') }}</a>`.
  3. Open the file that contains the main content wrapper — usually page.php, single.php, or index.php — and locate the element with `id="content"` (Storefront uses `<div id="content" class="site-content" tabindex="-1">`). Confirm the id value exactly matches the href fragment in the skip link.
  4. If they don't match, update one to match the other. If the id is absent, add it plus `tabindex="-1"` to the outermost content wrapper div or <main> tag.
  5. If you use a page builder (Elementor, Divi), switch to the theme builder's header template and verify the skip link is still the first focusable element output before the <header> section.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix skip link on BigCommerce
  1. In BigCommerce Admin go to Storefront → My Themes → your active theme → Advanced → Edit Theme Files.
  2. Open templates/layout/base.html. Look for the skip link near the top of <body> — Cornerstone theme includes `<a href='#content' class='skip-nav'>Skip to main content</a>`.
  3. Search the same file (and templates/pages/home.html or the appropriate page template) for the element with `id='content'`. In Cornerstone it is `<main id='content' ...>`.
  4. Ensure the href fragment (`#content`) and the target id (`content`) match exactly. Add `tabindex="-1"` to the <main> or wrapper element if it is not natively focusable.
  5. Save and preview with keyboard navigation to confirm Tab → Enter skips past the nav.
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 files. Go to Wix Editor → Add (+) → Embed → Custom Code (or use Wix Velo / Dev Mode).
  2. Enable Dev Mode (turn on in top menu). In the code panel open the masterPage.js file.
  3. Use the DOM API to inject a skip link: in the page's onReady handler add `document.body.insertAdjacentHTML('afterbegin', '<a href="#PAGES_CONTAINER" class="skip-link">Skip to main content</a>');` — Wix's main content section carries the id `PAGES_CONTAINER` in most templates.
  4. Add the matching CSS via Site → Site Styles or a custom CSS block so the link is visually hidden until focused (see code example above).
  5. Verify `id='PAGES_CONTAINER'` exists on the rendered page by inspecting the DOM in browser DevTools; if your template uses a different wrapper id, update the href accordingly.
  6. Note: Wix's accessibility features are improving — check the Wix Accessibility Wizard (Dashboard → Settings → Accessibility) for any built-in skip link settings.
Full Wix guide →Official Wix docs ↗
How to fix skip link on Squarespace
  1. In Squarespace Admin go to Website → Pages → (any page) → Edit → then open Design → Custom CSS for site-wide styles, and Settings → Advanced → Code Injection for site-wide HTML injection.
  2. In the Header Code Injection box (Settings → Advanced → Code Injection → Header), paste: `<a href='#page' class='skip-link'>Skip to main content</a>` followed by the CSS from the code example above.
  3. Squarespace wraps all page content in a `<div id='page'>` element — verify this by inspecting your live page in browser DevTools. If the id differs for your template version, update the href to match.
  4. Add `tabindex='-1'` to the `#page` element: since you cannot directly edit Squarespace's core HTML, use the Code Injection footer to run `document.getElementById('page').setAttribute('tabindex','-1');`
  5. Save and test with Tab → Enter to confirm focus lands inside the main content.
Full Squarespace guide →Official Squarespace docs ↗
How to fix skip link on Webflow
  1. Open your project in the Webflow Designer. In the left panel, click the Navigator and find the very first element inside the <body> — this is where the skip link must live.
  2. Add a Link Block or Text Link as the absolute first child of Body. Set its href to #main-wrapper (or any id you choose). Give it a custom class skip-link and apply the visually-hidden-until-focus CSS in the Style panel (position: absolute; top: -9999px; then add an interaction or :focus state to bring it on-screen).
  3. Select the Section or Div that wraps your main page content (below the Navbar component). In the element Settings panel (D key), add a custom attribute: Name = id, Value = main-wrapper. Also add tabindex = -1.
  4. Publish and test: Tab once on the live site should reveal the skip link; pressing Enter should scroll/focus to the main content section.
  5. For Webflow Ecommerce pages (product, collection, cart), repeat the id assignment on the main content wrapper in each page template.
Full Webflow guide →Official Webflow docs ↗
How to fix skip link on Adobe Commerce (Magento)
  1. The skip link is defined in the base template. Locate app/design/frontend/<Vendor>/<Theme>/Magento_Theme/templates/root.phtml (or the Luma/Blank theme equivalent at vendor/magento/theme-frontend-luma/templates/root.phtml — copy to your custom theme first).
  2. Near the top of the <body> output, add: `<a class='action skip contentarea' href='#contentarea'><span><?= $escaper->escapeHtml(__('Skip to Content')) ?></span></a>`
  3. Find the main content wrapper in app/design/frontend/<Vendor>/<Theme>/Magento_Theme/layout/default.xml or in the relevant .phtml template (typically the <main> or <div class='page-main'>) and ensure it has `id='contentarea'` and `tabindex='-1'`.
  4. Run `bin/magento setup:static-content:deploy` and clear the full-page cache (`bin/magento cache:flush`) after making changes.
  5. Test on the frontend with keyboard navigation.
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 template structure is identical.
  2. Luma's default skip link already targets `#contentarea`; confirm that id is present on the <div class='page-main'> wrapper and is not being removed by a third-party extension or custom theme override.
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 → your active theme → then edit the theme files directly via FTP or your hosting file manager.
  2. Open themes/<your-theme>/templates/_partials/header.tpl. Add a skip link as the first element: `<a href='#main' class='skip-link'>Skip to main content</a>` and include the visibility CSS.
  3. Open themes/<your-theme>/templates/index.tpl (and product.tpl, category.tpl as needed). Locate the <main> element and add `id='main' tabindex='-1'` if not already present.
  4. Clear the Smarty cache in Advanced Parameters → Performance → Clear Cache and test.
Full PrestaShop guide →Official PrestaShop 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 audit 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 (or visually shown on focus) hyperlink placed at the very top of a webpage that lets keyboard and screen-reader users jump past the navigation menu straight to the main content. It looks like `<a href="#main-content">Skip to main content</a>` and works by pointing to an element with a matching `id`, for example `<main id="main-content">`. The "no skip link target" issue means the skip link exists in your HTML but the element it points to — the `id` it references — is either missing, mismatched, or not present in the page at all, so the link goes nowhere.

Why does skip link matter?

Without a working skip link, anyone who navigates your store using only a keyboard (or a screen reader) must tab through every menu item, logo link, search box, and utility icon on every single page before reaching a product listing or article — a frustrating experience that can cause them to abandon your site entirely. This directly affects customers with motor disabilities, visual impairments, and anyone who relies on assistive technology. Under WCAG 2.1 Success Criterion 2.4.1 (Bypass Blocks, Level A — the lowest, most required level), a broken skip link is a conformance failure that can expose your business to accessibility complaints or legal action in jurisdictions that require web accessibility (including the US ADA, UK Equality Act, and EU EAA). Fixing it also signals technical quality to Google's crawlers and improves perceived page experience.

How do I fix skip link?

Add a valid, matching target ID to every skip-navigation link so keyboard and assistive-technology users can bypass repeated header content and jump directly to the main content area.

Authoritative references

Related Accessibility (WCAG) issues