Open your homepage, click once in the browser’s address bar, and press Tab. What gets focus first? On a well-built site, a small box appears in the top corner that says “Skip to content”. On many sites, nothing visible happens at all, or the focus lands on the logo and then wanders through twenty menu items before it reaches anything useful.
That small box is a skip link, and it is one of the oldest and simplest accessibility features on the web. It is also one that WordPress themes break surprisingly often. This post covers what it does, which WCAG criterion it relates to, how to test yours in a minute, why it fails, and the other way of meeting the same requirement.
What a skip-to-content link does, and who relies on it
Think about someone who uses the keyboard instead of a mouse, because of a motor disability, a repetitive strain injury or a switch device that acts like a keyboard. Every time they load a page on your site, Tab takes them through the logo, the phone number, every top-level menu item, a search box, a cart icon and the social icons, before reaching the first heading of the page they came for.
That happens on every page, twenty times a session. The skip-to-content link is a single link, placed first in the page, that jumps straight past all of that to the main content. Press Tab once, press Enter, and you are at the start of the article or product.
Screen reader users benefit too, although many of them have other shortcuts, such as jumping by heading or by region. For keyboard users who can see the screen, the link is often the only shortcut they have.
Success criterion 2.4.1 Bypass Blocks, in plain words
WCAG 2.4.1 Bypass Blocks says there must be a way to skip blocks of content that repeat on multiple pages, such as the header and navigation. It is a Level A criterion, so it sits underneath every Level AA target, including the one most US audits use.
Note what the criterion does not say. It does not say “you must have a link at the top”. It asks for a mechanism, and the W3C’s own techniques accept a few: a link at the top of the page, properly marked-up page regions (landmarks), or headings at the start of each section. In practice, a working skip-to-content link plus correct landmarks is the combination we recommend, because between them they serve both sighted keyboard users and screen reader users.
How to test the link on your own site
This takes about a minute per template. Do it on the homepage, a normal page, a blog post and, if you sell online, a product page and the cart.
- Load the page and click in the address bar so the page itself has not been clicked.
- Press Tab once. A visible “Skip to content” or “Skip to main content” link should appear, usually in the top left. If you are on a Mac using Safari, turn on keyboard navigation for links first, or test in Chrome or Firefox instead.
- Press Enter. The page should scroll so the main content is at the top of the window.
- Press Tab again. The next item to get focus should be inside the main content, such as the first link in the article, not back in the header menu.
- Check that nothing covers the content you jumped to. A sticky header sitting over the first heading counts as a problem.
If step 2 shows nothing, open the page source (or the developer tools) and search for “skip”. You will often find the link is there but hidden in a way that keeps it hidden on focus, or missing completely. For a wider pass over every key, use a full keyboard test rather than this quick check.
Why skip links break in WordPress themes
Most decent themes ship with one. When the link is broken, the cause is usually a later change: customization, a page builder or a plugin. These are the usual culprits.
Hidden for good, not hidden until focused
The link is meant to stay off-screen until it receives keyboard focus, then appear. If someone hides it with display: none or visibility: hidden because “it looked odd at the top of the page”, it can no longer receive focus at all. Keyboard users then lose it entirely.
The target does not exist
The link points to an ID such as #content or #primary. Switch to a page builder template, a custom header or a different layout and that ID may no longer be on the page. The link then does nothing when you press Enter, which is worse than having no link, because it promises a shortcut it cannot deliver.
The page scrolls but focus stays put
In some setups the page visibly jumps, but the next Tab goes back to the top menu. This usually happens when the target is a plain container that cannot take focus and the browser does not move the sequential focus point there. Adding tabindex="-1" to the target element usually fixes it.
A sticky header hides the destination
The link works, but the first heading ends up underneath a fixed header, so a sighted keyboard user cannot see where they landed. This overlaps with 2.4.11 Focus Not Obscured (Minimum), new in WCAG 2.2. A scroll-margin-top value on the target, equal to the header height, is the tidy fix.
No visible focus style on the link itself
When the link appears with no outline and blends into the header colors, people miss it. The link needs the same kind of clear visible focus styles as every other control.
Something else gets focus first
Cookie notices, announcement bars and chat widgets inserted at the top of the page can push the shortcut out of first place. It should still be the first thing Tab reaches, or very close to it.
A minimal pattern that works
If your theme lacks the link, or you need to repair it, the markup is short. It belongs right after the opening body tag, usually in the theme’s header template, ideally changed through a child theme so updates do not wipe it.
<a class="skip-link" href="#main">Skip to main content</a>
...
<main id="main" tabindex="-1">
...
</main>And the CSS that keeps it off-screen until it is focused:
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 1rem;
top: 1rem;
z-index: 1000;
padding: 0.5rem 1rem;
background: #fff;
color: #000;
outline: 3px solid #000;
}
#main { scroll-margin-top: 6rem; }Block themes usually output a working link for you. If yours does not, raise it with the theme author before patching it yourself, because a fix in the theme helps every site using it.
Landmarks: the other way to bypass blocks
Landmarks are page regions marked up with the right HTML elements: header, nav, main, aside and footer. Screen readers list these regions and let people jump between them, so a person can go straight to “main” without any shortcut link at all.
Things to check:
- Exactly one
mainper page. Page builders sometimes add a second wrapper marked as main, or none at all. - Navigation regions are named when there is more than one. A header menu, a footer menu and a sidebar menu all called “navigation” are hard to tell apart. A short label for each fixes it. Menu behavior itself is a separate subject, covered in our post on keyboard-friendly navigation menus.
- Content is not floating outside every region. Text that sits outside the landmarks is easy to miss for someone moving region by region.
Browser extensions and the WAVE checker show landmarks, which makes this a fast thing to review alongside the shortcut link.
Where this fits in a wider audit
A skip link is a small fix with an outsized effect on daily use, and it is often the first thing an auditor tests. It is one Level A item among many; what WCAG 2.2 Level AA covers gives you the rest of the list. If you want the whole picture of how audits, fixes and monitoring fit together, our page on accessibility services for US businesses lays it out.
Frequently asked questions
Does every page need its own skip link?
Every page that has repeated blocks before the main content should have a way to bypass them, and in WordPress that means the link sits in the shared header, so one fix covers the whole site. The important thing is that its target exists on every template, including landing pages and shop pages built differently from the rest.
Is it fine to hide the link because it looks strange?
Hiding it off-screen until it receives keyboard focus is fine and is how it is meant to work. Mouse users never see it. Hiding it with display none or visibility hidden is not fine, because it can no longer be focused and keyboard users lose the shortcut completely.
If my site has proper landmarks, do I still need the link?
Landmarks can satisfy the bypass requirement on their own, mainly for screen reader users who can jump by region. Sighted keyboard users usually have no built-in way to jump by landmark, so a working skip to content link still helps them. Having both is cheap and covers more people.
Can a plugin add the link for me?
Some accessibility plugins add one, and that can help on an old theme. Check that the target ID exists on every template, that focus moves to the content and that the link is visible when focused. A plugin that adds a link pointing to a missing target leaves you worse off.
A WCAG audit of your templates checks bypass blocks, focus and the rest of Level AA on each one and lists what fails and why, and our WordPress accessibility work covers repairing the theme so the fix survives updates. Or just press Tab on your homepage today and see what happens.
Next in this series: ARIA Labels Explained: When They Help and When They Hurt
