How to Add a Skip-to-Content Link in WordPress

Give every visitor a faster path to your content, and tick a major WCAG box, in under 5 minutes.

Skip-to-content links let keyboard and assistive tech users bypass long menus and jump straight to the main section of a page. They’re one of the simplest ways to meet WCAG 2.4.1 – Bypass Blocks, which requires a mechanism to skip repeated blocks of content.

Why skip links matter – for accessibility and performance

Without skip links, keyboard users often have to hit Tab 20–80 times just to reach the first heading. That slows them down, increases cognitive load, and can be exhausting for anyone with motor limitations.

Skip links help:

• Screen reader users – reach main content without wading through repeated navigation.
• Keyboard-only users – fewer key presses, less fatigue.
• Motor-disabled users – faster, more efficient browsing.
• Power users – external keyboards and assistive touch devices benefit too.

They also make sense for your business: quicker access means lower bounce rates, better engagement, and stronger compliance with accessibility standards. They’re a perfect example of how sustainable web design principles can make a site both faster and more inclusive.

The process is simple: check if your theme includes a skip link, choose how to add or improve it, then test and fix as needed.

Ready for Faster, Greener Hosting?

We recommend Krystal - fast, reliable, powered by 100% renewable energy. It's a host we trust and a smart move for a cleaner web.

Switch to Green Hosting or see why we recommend it →

Step 1 – Check if your theme already has a skip link

Some modern WordPress themes (e.g. Twenty Twenty-Four, Astra) include working skip links. Many don’t, or hide them in CSS. The WordPress Accessibility Team maintains best-practice guidelines for theme authors, but not every developer follows them.

Quick test:

1. Load your homepage.
2. Press Tab once.
3. Look for a visible “Skip to content” link in the top left.
4. Press Enter, it should land you past navigation in the <main> landmark or first heading.

Signs it’s broken:

• Link is invisible when focused.
• Focus lands in the wrong place.
• Smooth-scroll animation moves visually but doesn’t move keyboard focus – breaking accessibility.

If you’re running regular accessibility audits, this check should be one of the first steps.

Theme author best practices

According to the WordPress Theme Handbook and accessibility experts (BOIA, WP Engine):

• Skip links should be the first focusable element on the page.
• They must be visible on focus with clear, high-contrast styling.
• Use clear link labels (“Skip to content” beats “Skip navigation”).
• Some designs benefit from multiple skip links (e.g., skip to footer, skip to nav).
• Avoid overloading users with too many skip link targets.

Step 2 – Choose your implementation method

1. WP Accessibility plugin (fast, no code)

• Adds skip links automatically.
• Detects common content containers (#main, #content, .site-main, main[role="main"]).
• Maintains WCAG 2.1 compliance and updates with WordPress core.

WP Accessibility plugin by Joe Dolson is trusted, lightweight, and covers other essentials like focus management.

2. Manual code (more control, more upkeep)

• You add HTML + CSS directly.
• Complete styling freedom.
• Must recheck after theme updates.

For most site owners, option 1 is the safer, faster route.

Step 3 – Add skip links with WP Accessibility

1. Go to Plugins > Add New in your WordPress dashboard.
2. Search WP Accessibility.
3. Install and activate.
4. Navigate to Settings > WP Accessibility.
5. Enable Add Skip Links.
6. Choose “Skip to content” as link text (clear, universal).

If your theme uses a custom selector for the main content container, specify it in the plugin’s advanced settings.

Step 4 – Test your skip links

Desktop test

• Press Tab – skip link appears with good contrast and focus style.
• Press Enter – focus jumps to the main content area.

Mobile & assistive tech test

• Test with external keyboards, switch controls, and voice navigation.
• If possible, use NVDA (Windows) or VoiceOver (macOS/iOS).
• Confirm it’s announced clearly and works consistently.

When testing, consider how these small navigation improvements tie into site performance and reduced friction for all users.

Step 5 – Fix common issues

Link disappears when focused?
Your CSS may hide focused elements. Add:

.skip-link:focus {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 9999;
  text-decoration: none;
  border-radius: 4px;
}

Wrong target?
Identify your actual content container in DevTools and update the selector.

Smooth-scroll focus loss?
If your theme uses smooth scrolling, set focus explicitly on the target after scroll to maintain keyboard accessibility.

Beyond the nav:
You can add skip links to jump to sidebars, search results, or other repeated blocks, not just the main content. These small usability wins can even reduce your website’s carbon footprint by helping users reach their goals faster.

The Quick Fix for a Slow, Heavy Site

We optimise your site for speed, efficiency and sustainability. No rebuild. No delays. Just better performance and a lighter footprint.

Get Tuned Up or discover DIY improvements →

Your next action

Run the Tab test on three different pages right now.
If your skip link fails any of the checks above, fix it today, it’s a five-minute job with long-term impact.