Skip to Main Content Link Not Working: How to Fix WCAG Skip Links

What a skip link is and what WCAG asks for

A skip to main content link is the first focusable item on a page. It is usually hidden until someone presses Tab, then appears at the top of the screen. Activating it moves keyboard focus past the header, logo, search box and menu, straight to the start of the page content.

Without it, a keyboard user has to tab through every menu link on every page before reaching the content. On a site with a mega menu that can be fifty or more key presses per page. Screen reader users have other ways to jump around, but sighted keyboard users, switch users and people using voice control often rely on the skip link.

WCAG success criterion 2.4.1, Bypass Blocks, at Level A, asks for a way to skip blocks of content that repeat across pages. WCAG accepts more than one technique: a skip link, ARIA landmarks such as <main> and <nav>, or a sensible heading structure. Browsers give sighted keyboard users no built-in shortcut to jump between landmarks, though, so a working skip link plus a proper <main> element is the dependable way to meet it.

Why skip to main content is not working

A missing or wrong target is by far the most common cause. Page builders often output the content wrapper without the id the theme's skip link points to, and duplicate ids from copied sections can send the link to the wrong place; see duplicate id fixes.

How to test and diagnose it

Test it the way a keyboard user would. Load the page, click in the address bar, press Tab once. The skip link should appear. Press Enter, then press Tab again. Focus should land on the first link or button inside the content, not on the menu.

Check the HTML the server sends:

curl -s https://example.com/ | grep -oiE 'href=.#[A-Za-z0-9_-]+.' | head -5
curl -s https://example.com/ | grep -oE 'id="(main|content|maincontent|primary)"' | sort | uniq -c
curl -s https://example.com/ | grep -i '<base '

The first line shows the skip link and its target. The second should print the matching id exactly once. The third should print nothing; if it finds a <base> tag, fragment links resolve against that address instead of the current page.

Then check where focus goes, in the DevTools console after pressing the skip link:

document.querySelector('#main')            // should not be null
document.querySelectorAll('[id="main"]').length   // should be 1
document.activeElement                       // should be the main element

If document.activeElement is still the skip link or the body, focus did not move. Look in the Event Listeners pane for click handlers on a[href^="#"]; smooth scrolling scripts and single-page app routers often call preventDefault() on every hash link.

A skip link that works everywhere

Put the link immediately after the opening <body> tag, before any banner or header, and give the main element a matching id and tabindex="-1":

<body>
  <a href='#main' id="skip-link">Skip to main content</a>
  <header>...logo, search, navigation...</header>
  <main id="main" tabindex="-1">
    <h1>Opening hours</h1>
    ...
  </main>
</body>

Current browsers move the focus starting point to the target of a fragment link even when the target is not focusable, but tabindex="-1" makes the move dependable across browsers and screen readers without adding the main element to the Tab order.

Hidden until focused, not hidden for good

#skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 10000;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border: 2px solid #1a1a1a;
  font-weight: 700;
}
#skip-link:focus {
  top: 1rem;
  outline: 3px solid #1a1a1a;
  outline-offset: 2px;
}
main { scroll-margin-top: 6rem; }

The link sits off screen until it receives focus, then slides into view with a clear outline, which meets Focus Visible. The scroll-margin-top value should match the height of your sticky header so the start of the content is not hidden beneath it. Keep the default link text shade or another with strong contrast; see colour contrast fixes.

If a script blocks hash links

document.getElementById('skip-link').addEventListener('click', (e) => {
  const target = document.getElementById('main');
  if (!target) return;
  e.preventDefault();
  target.focus();
  target.scrollIntoView();
});

Use this only when a router or smooth scroll script stops the normal link from working and you cannot exclude the skip link from that script.

Platform notes

• WordPress block themes. WordPress adds a skip link automatically to block themes and points it at the <main> element, adding an id if needed. If your template has no group set to the main HTML element, there is nothing to skip to. Open the template in the site editor, select the content group, and set its HTML element to main under Advanced.
• WordPress classic themes and page builders. The theme usually prints a link to #content or #primary. Page builder templates that replace the theme's content area can drop that id. Add it back through the builder's CSS ID field on the main section. More in accessibility fixes in WordPress.
• Shopify. Most current themes include a skip link to #MainContent. Custom sections or apps that add a banner before it can push it down the focus order, so check the first Tab stop after installing apps.
• React, Next.js and other single-page apps. Use a plain anchor element for the skip link, not a router link component, and make sure the main element with its id is present on every route. After client-side navigation, move focus to the main heading or main element so keyboard users start at the new content.

Worked example

Example Bakery's site had a skip link that appeared on Tab but did nothing. The checks showed:

1. The theme's link pointed to #content, but the page builder template wrapped the content in a section with no id.
2. A smooth scroll script attached to every a[href^="#"] called preventDefault() and scrolled the window, without moving focus.
3. The sticky header was 88 pixels tall and covered the first heading after the jump.

The fix added id="content" and tabindex="-1" to the main section through the builder's settings, excluded #skip-link from the smooth scroll script with :not(#skip-link) in its selector, and set scroll-margin-top: 6rem on the target. After the change, pressing Enter on the skip link and then Tab moved focus to the first link in the content, with the heading in full view. It took two keystrokes to reach the content instead of 34.

The fix, step by step

Edge cases worth knowing

• More than one skip link. Extra links such as skip to search or skip to footer are allowed, but keep the first one as skip to main content and keep the list short.
• Cookie and consent banners. A banner placed before the skip link in the HTML takes the first Tab stop. Move the skip link above it in the source, or make sure the banner can be dismissed quickly with the keyboard.
• Visible text. Write the link as plain words, such as Skip to main content. An icon or a link that only reads Skip is unclear to voice control users.
• Anchor links elsewhere. If in-page jump links on the same site also fail, the cause is usually shared; see anchor jump links not working.
• Focus outline on main. With tabindex="-1", some browsers draw an outline around the whole content area after the jump. That is acceptable. If you hide it, hide it only for the main element and keep strong focus styles everywhere else.

Keeping skip links working

1. Build the skip link and the id="main" target into the base template, so new page layouts inherit both.
2. Add a keyboard check to your release routine: Tab, Enter, Tab on the home page and one inner page.
3. Check the first Tab stop after installing any banner, chat or consent tool.
4. Run a full keyboard review now and then; the keyboard navigation guide and focus indicator fixes cover the wider checks, and checking WCAG compliance puts them in context.