If you’ve ever run an accessibility audit on a WordPress site, you’ve probably seen the little “Skip to content” link appear at the top when tabbing through a page.
It’s a nice idea – it’s meant to let keyboard and screen reader users jump past the navigation straight to the main content.
Unfortunately, in its default form, WordPress’ skip link doesn’t actually work as intended.
The Problem? Scroll, but No Focus
The default skip link in WordPress simply scrolls the page to the <main> element.
It doesn’t move keyboard focus to that element – which means after activating the skip link and pressing Tab, focus jumps back to the top of the page (usually the logo or first menu item).
That’s frustrating and confusing for keyboard users, and effectively means the skip link fails its core purpose.
Here’s the relevant JavaScript snippet WordPress injects:
( function() {
var skipLinkTarget = document.querySelector('main');
if (!skipLinkTarget) return;
})();
It scrolls the viewport, but doesn’t assign focus.
To make it behave properly, you need to add a temporary tabindex="-1" to the <main> element and focus it when the link is activated:
document.querySelector('.skip-link').addEventListener('click', function(e) {
var target = document.querySelector('main');
if (target) {
target.setAttribute('tabindex', '-1');
target.focus();
}
});
This ensures that keyboard users land inside the main content region, ready to continue navigating logically.
Why This Matters
Skip links are a key accessibility feature for:
- Keyboard users who navigate via the Tab key
- Screen reader users who rely on structured navigation to bypass repetitive content
If the skip link doesn’t correctly shift focus, those users must tab through every menu item – sometimes dozens of links – to reach the content. That’s both inefficient and fails WCAG criteria.
Relevant WCAG 2.2 Success Criteria
- 2.4.1: Bypass Blocks – Users must be able to skip blocks of repeated content. “A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.”
- 2.4.3: Focus Order – Focusable components must receive focus in an order that preserves meaning and operability.
If your skip link only scrolls visually but doesn’t transfer keyboard focus, it does not meet these criteria – because the keyboard user’s focus never actually moves.
The Fix (and Best Practice)
To make WordPress’ skip link actually useful:
- Give your main landmark a unique ID (for example
<main id="main-content">) - Add a
tabindex="-1"attribute dynamically (or permanently if appropriate) - Focus the target element when the skip link is activated
- Remove the tabindex afterward if you wish to keep your DOM clean
Here’s a full working example:
( function() {
var skipLink = document.querySelector('.skip-link');
var target = document.querySelector('main');
if (skipLink && target) {
skipLink.addEventListener('click', function(e) {
e.preventDefault();
target.setAttribute('tabindex', '-1');
target.focus();
});
}
})();
In Summary
The default WordPress skip link looks right – but fails silently for those who need it most.
A simple line of JavaScript and a tabindex attribute can make your site significantly more accessible and compliant with WCAG 2.2 AA.
Accessibility isn’t just about passing tests – it’s about building interfaces that respect everyone’s way of using the web.
PorterWP Users
If you’re using PorterWP v1.8.2 or above, this accessibility fix is enabled by default – ensuring your skip link passes WCAG 2.2 validation without any manual setup.
You can disable or override this behaviour in your project’s porter.json configuration file if you need custom handling.
