Skip Links: The Simple Feature That Makes a Big Difference

Tab through your homepage right now, before reading another word. Count how many times you have to press Tab before you reach your main content. If the answer is “more than one,” you’ve just experienced what keyboard and screen reader users deal with on every single page load — and there’s a decades-old, five-minute fix for it that most WordPress sites still skip.

What Is a Skip Link?

A skip link — sometimes called a “skip to content” or “skip navigation” link — is the first focusable element on a page. It’s usually visually hidden until it receives keyboard focus, at which point it appears at the top of the screen with a message like “Skip to main content.” Activating it jumps focus straight past the header, logo, and navigation menu to the beginning of the page’s main content.

It’s one of the oldest accessibility techniques on the web — WCAG has required a documented “bypass block” mechanism since version 1.0 in 1999 — and it remains a required success criterion (2.4.1 Bypass Blocks) in WCAG 2.1 and 2.2 at Level A, the baseline level almost every legal standard references.

Why This Small Link Matters So Much

Mouse users skip the header instinctively — their eyes and cursor jump straight to whatever they came for. Keyboard and switch-device users don’t get that shortcut. Every single link in your main navigation, every dropdown item, every social icon in the header has to be tabbed through, one element at a time, before reaching the content of the page.

Think about what that means for someone navigating a site with a mega-menu of 40 links, repeated on every single page. Without a skip link, that’s 40 extra keystrokes paid on every page load, just to get to the thing they actually want to read or buy. For screen reader users, it’s slightly better — most screen readers offer heading or landmark navigation as an alternative — but not everyone uses a screen reader, and not every page is marked up with the landmarks needed to make that work reliably.

People who benefit from skip links include:

• Keyboard-only users, including many people with motor disabilities who can’t use a mouse
• Switch-access users, for whom every activation takes real physical effort and time
• Screen reader users on sites without good heading structure or landmark regions
• Users with cognitive or attention disabilities who benefit from a shorter, more predictable path through the page

What a Good Skip Link Actually Looks Like

A surprising number of sites that “have” a skip link still get it wrong in ways that make it useless. A correctly implemented skip link should:

1. Be the first focusable element in the DOM — before the logo, before the nav
2. Be visually hidden by default, but become visible when it receives keyboard focus
3. Have clear, descriptive text — “Skip to main content,” not just “Skip”
4. Point to a real, focusable target, such as a main element with a matching id
5. Actually move keyboard focus, not just scroll the page to that section

That last point trips up a lot of implementations. A skip link that only changes the URL fragment will scroll the page visually, but if the target element isn’t focusable, keyboard focus stays wherever it was — usually back at the top of the page. The user sees the page jump, but their next Tab press still starts back at the header. The target element needs a tabindex="-1" attribute so it can programmatically receive focus even though it’s not naturally interactive.

Adding a Skip Link to Your WordPress Site

Many default and accessibility-ready WordPress themes (including Twenty Twenty-Four and other core themes) already include a working skip link — check by loading your homepage and pressing Tab once before doing anything else. If nothing appears, or if it appears but doesn’t move focus correctly, here’s the general shape of a fix at the theme level:

• Add the link markup immediately after the opening body tag, typically in header.php: an anchor with class “skip-link screen-reader-text” linking to “#main-content”
• Add a matching id=”main-content” and tabindex=”-1″ to the opening tag of your main content wrapper
• Style the skip-link class so it’s visually hidden by default (using an accessible off-screen technique, not display:none, which also hides it from assistive tech) and visible on focus

If your site is built primarily with a page builder or block theme, the skip link usually needs to live in the theme’s header template part rather than in page content, since it has to be present and first-in-DOM on every single page automatically.

Testing It Yourself

You don’t need specialized tools for this one. Load any page on your site, click somewhere neutral on the page to make sure focus isn’t already inside a form field, and press Tab once. You should see a visible link appear near the top of the viewport. Press Enter, then press Tab again — if focus is now inside your main content area rather than back in the header navigation, it’s working correctly.

Common Mistakes We See

• Using display:none or visibility:hidden to hide the link, which also hides it from screen readers — it needs to be visually clipped, not removed from the accessibility tree
• Placing the skip link after the navigation menu instead of before it
• Linking to a target with no tabindex=”-1″, so focus doesn’t actually move
• Adding a skip link once, in a single page’s content, instead of in the theme so it appears sitewide
• Forgetting to test it after a theme update, which can silently strip custom header markup

None of this requires guesswork — it’s one of the more mechanical, checkable pieces of accessibility work, which is exactly why an automated scan is useful here. A skip link either exists, is first in the tab order, and moves focus correctly, or it doesn’t.

Take Action

LEWCA’s WCAG scanner checks for missing or broken bypass mechanisms like skip links as part of a full code-level scan of your WordPress site, flagging exactly where the markup falls short — not just whether something visually looks fine. Pairing that with LEWCA’s accessibility toolbar gives visitors an added layer of on-page navigation support while you work through fixes. Scanning finds real issues in your code; it can’t guarantee full compliance on its own, but it tells you precisely what to fix instead of leaving you guessing. See what’s included in each tier on the pricing page, or head to the download page to install LEWCA and run your first scan today.