WordPress Skip to Content Link Explained

A WordPress skip to content link is a short link at the start of a page that lets a keyboard user jump past repeated menus and straight to the main content. It is usually hidden until it receives keyboard focus, then it appears at the top of the page. Press Tab once after a page loads, and a working link shows itself. Press Enter, and focus should land in the main content, not back in the header.

That last part is the test that matters. A link that only scrolls looks like it worked, but it leaves keyboard focus where it was. The next Tab press returns to the header menu. A working skip link moves focus.

Key takeaways

• A skip link is the first focusable item on the page, and it points to the main content.
• A link visible on focus can meet WCAG 2.4.1 Bypass Blocks, Level A, even if it stays hidden for mouse users.
• A link hidden with display none or visibility hidden cannot be reached by keyboard.
• Test three things: the link appears on the first Tab press, activating it moves focus, and the next Tab press stays in the main content.
• In WordPress, a missing main element on a template is a common reason the link is missing there.
• A scan is a starting point, and a quick manual keyboard check is part of good practice.

How the WordPress skip to content link works

WCAG success criterion 2.4.1 Bypass Blocks, Level A, requires a mechanism to bypass blocks of content that are repeated on multiple web pages. A header menu is the usual example, and a keyboard user would otherwise have to step through it on every page before reaching new content.

W3C technique G1 describes the skip link pattern. The first interactive item is a link to the beginning of the main content. Activating it sets focus beyond the other content to the main content. W3C also notes that a link visible only when it has focus can meet 2.4.1.

The code has three parts. First, the link itself, placed as the first focusable item, with clear text such as Skip to main content. Second, a target with a matching id, usually the main element. Third, CSS that keeps the link out of sight until focus, then brings it into view. A detail on the target helps focus land cleanly: tabindex with a value of minus 1 lets the main element receive focus without adding it to the regular Tab order. Without it, some browsers scroll to the target without moving focus.

Here is a plain version of the pattern, written as an example:

<a class="skip-link" href="#main-content">Skip to main content</a>
<header>
  <nav aria-label="Primary">
    <a href="/">Home</a>
  </nav>
</header>
<main id="main-content" tabindex="-1">
  <h1>Page title</h1>
  <p>Main content starts here.</p>
</main>

The href value matches the id on the main element. If they do not match, the link points nowhere. If the CSS uses display none, the link leaves the tab order entirely.

Test your skip link in under a minute

You do not need a tool for this test. Use a desktop browser, a keyboard, and your own site, viewed as a visitor.

• Open the page, then click in the browser address bar so focus starts from a known place.
• Press Tab once. A working skip link appears, usually at the top left.
• Press Enter to activate it. The page should move to the main content.
• Press Tab once more. Focus should land on the first focusable item inside the main content.
• Repeat on a second template. A link can work on one template and be missing on another.

Each step checks a different failure. The first Tab press checks presence and position. If a link appears only after the menu, it sits too late to save the user any work. The Enter press checks the target. If Enter does nothing, or the page jumps to the wrong place, the href and the target id do not match, or the target is missing. The next Tab press checks focus. If it returns to the header, the link scrolled without moving focus.

Note what you find per template, not just per site. A homepage pass does not prove a post page built from a different template. The keyboard tab order guide on the Axeazy blog covers the wider Tab key test.

Why WordPress themes break skip links

WordPress themes supply the skip link in most cases, so a broken link is often a theme or template problem. Four causes cover most reports.

First, the template has no main element. In block themes, WordPress adds the skip link automatically if the page contains a main element. If a template wraps its content in a plain container instead, the automatic link may not appear on pages built from that template. Give that template a real main element that wraps all of the main content, then retest.

Second, the link and the target disagree. A theme may output a link to one id while the template uses a different id, or no id at all. View the page source, find the skip link href, then search the source for that id. If the id is absent, the link is broken even though it appears on focus.

Third, the CSS hides the link from everyone. Theme CSS, a page builder style, or a plugin style can override the focus style, or hide the link with display none or visibility hidden. Both values remove the link from the tab order. Check the focused state in the browser developer tools if the link appears in the source but never shows on Tab.

Fourth, a scroll effect moves the view without moving focus. Smooth scrolling is the example most often described: the page glides down, then the next Tab press lands back in the header. A fix has to move focus to the target, not only scroll the viewport. Test the skip link with smooth scrolling turned on, because it may pass a visual check and still fail the focus check above.

How Axeazy helps with this exact issue

Axeazy lists skip navigation among its 14 fix categories, so a scan can flag a missing or broken skip link alongside other issues on the same page. Read the honest scope page to see what is covered and what still needs a human check, including the manual keyboard test in this article.

For WordPress, the free WordPress plugin page describes a free plugin that applies 3 fixes instantly at render time, with no account needed: a skip navigation link, a page language attribute, and an alt text fallback. The plugin page describes the skip link as invisible to mouse users and appearing on the first Tab press, tied to WCAG 2.4.1. Paid plans add more, including weekly scans. The free plugin supplies the link itself at render time. It does not rewrite a theme template that lacks a main element, or repair a theme CSS rule that hides the link. Those problems still need a theme level fix, followed by a retest.

To see how Axeazy scores issues in general, read the methodology page. For a quick read on your own site, run the free 60 second scan on the Axeazy home page. It needs no signup.

Last checked: October 26, 2026.

FAQ

Does every page need its own skip link?

No, one link pattern should appear on every page with repeated header content, with the same link text and target pattern across templates. Check per page whether the target exists on that template and whether focus lands in the main content after activation.

Can a skip link stay hidden until focus?

Yes. W3C technique G1 states that a link visible only when it has focus can meet 2.4.1, even though W3C prefers links visible at all times. Use positioning or clipping that keeps the link in the tab order. Do not use display none or visibility hidden, because those values remove the link from keyboard reach.

Why does my skip link scroll the page but leave focus in the header?

Because scrolling and focus are separate actions. A plain anchor jump can move the viewport without moving keyboard focus, and a smooth scroll effect can do the same. After activation, press Tab. If focus returns to the header, the target needs to receive focus on activation.

What should I check first if the link is missing on one template?

Check whether that template has a main element. In block themes, the automatic link depends on a main element being present, so a template that wraps content in a plain container is a likely cause. Compare it with a working template, then retest.

Does a skip link replace landmarks and headings?

No. Landmarks and headings give screen reader users other ways to move through a page, and a skip link gives sighted keyboard users a direct shortcut past repeated content. Use all three: a main landmark, descriptive headings, and a skip link as the first focusable item.

Sources

• W3C Technique G1: Adding a link at the top of each page that goes directly to the main content area, checked October 26, 2026
• Equalize Digital: How to Make Your WordPress Site More Accessible With Skip Links, checked October 26, 2026
• WebAIM: Web Accessibility for Designers, checked October 26, 2026
• WebAbility: Skip to Main Content Links, A Developer's Guide, checked October 26, 2026