Accessibility May 7, 2026

Skip Link in WordPress: Jump to Main Content with One Tab Press

A skip link lets keyboard users bypass repeated navigation. Here is how to add it to your theme with CSS that reveals only on focus.

A skip link is the first link in the document, visible only when a keyboard user first presses Tab. It lets them jump over header, navigation and sidebar straight to the main content - essential for blind users with screen readers and for keyboard-only users.

Why this matters

When a keyboard user first presses Tab, focus moves to the first link. Without a skip link, that first link is the logo, then nav item one, then nav item two... through 30-50 stops on every page. Across 10 pages of a site that is 300+ Tab presses just to bypass content the user has already seen.

This is a international accessibility guidelines Level A requirement, 2.4.1 Bypass Blocks. The standard solution: place a "Skip to main content" link as the first focusable element, targeting #main. On every page, the first Tab reveals the link; Enter jumps focus to <main id="main">; from there the user reads the content.

How to detect

Open the site and press Tab once. If a "Skip to content" link appears, you have one. If the first focused element is the logo or a nav item, you do not. Tools: axe DevTools reports "Page should have a skip link". RankPlus's automated check looks for an early-document link with href="#main" or href="#content" or text containing "skip".

How to fix

  1. Open header.php in the active theme (wp-content/themes/THEME/header.php).
  2. Add the link immediately after <body> and before <header> or <nav>:
    <a class="skip-link" href="#main">
    Skip to main content
</a>
  3. Make sure the main element has id="main" and tabindex="-1" so it can receive focus:
    <main id="main" tabindex="-1">
    <!-- Page content -->
</main>
  4. Add CSS in the child theme's style.css to hide the link until focused:
    .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    z-index: 100;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid #ffd700;
    outline-offset: 2px;
}
  5. Test with the keyboard: press Tab on the home page - the link should pop in at the top. Press Enter - focus jumps to main.
  6. Modern themes (Astra, GeneratePress, Twenty Twenty-Four, Twenty Twenty-Five) already include a skip link. Do not add a second one - that creates duplication.
  7. For FSE block themes in WordPress 6.0+: edit parts/header.html or insert an HTML code block with the link.

Common mistakes

  • display:none on the skip link: also hides it from screen readers. Use position: absolute; top: -40px to hide visually only.
  • Linking to a non-existent id: href="#main" with no id="main" in the document. Verify the template.
  • Skip link placed after the header: defeats the purpose. It must be the first focusable element.
  • Two skip links: theme supplies one and you added another. Check before adding.
  • Low-contrast focus colour: the revealed link must be obvious. Black-on-white or a brand colour with 7:1 contrast.

Verifying the fix

Open the site, press Tab. The "Skip to content" link should appear. Press Enter - focus jumps to main. Run axe DevTools - the Bypass Blocks category should pass. With NVDA, the first Tab announces "Skip to main content, link". RankPlus turns green.

Tip: If a modern theme provides a skip link but you cannot see it, sometimes a page builder wraps the whole page in a div that clips position-absolute children. Inspect the z-index and overflow of the wrapper.
More in this category ← Back to all docs