How to fix skip link on Adobe Commerce (Magento)

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.

Steps for 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.
Official Adobe Commerce (Magento) documentation ↗

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.

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.

See the complete Skip link guide for every platform and the full background.

Not sure if your Adobe Commerce (Magento) store has this?

Run a free SEOLZ scan — we’ll find skip link and every other issue across your whole site.

Scan my site free

Fix skip link on another platform