A skip navigation link is one of the most fundamental accessibility features a website can implement. It allows keyboard users, including users who rely on screen readers, people with motor disabilities, and power users who navigate entirely by keyboard, to bypass the site header and navigation menu on every page load and jump directly to the main content. Without it, a keyboard user must tab through every navigation item on every page before reaching the content they came for.
The WCAG 2.1 success criterion 2.4.1 (Bypass Blocks) requires that a mechanism exists to skip repeated content. A skip link is the most widely supported and simplest way to satisfy this requirement.
The Code
Add this to your functions.php or a site-specific plugin. It outputs the link immediately after the opening <body> tag using the wp_body_open action (available since WordPress 5.2) and injects the necessary CSS in the <head>.
How It Works
The link is visually hidden by default, positioned at top: -100% places it above the visible viewport where sighted users can’t see it. When a keyboard user presses Tab to begin navigating the page, the first focusable element is this link, and the CSS :focus rule brings it into view at the top of the page. Clicking it, or pressing Enter, scrolls the page to the element with id="main-content" and moves keyboard focus there.
Using position: absolute rather than display: none or visibility: hidden is deliberate, those properties remove the element from the accessibility tree entirely in some screen reader implementations, meaning screen reader users can’t find the link. Absolute positioning keeps it in the DOM and focusable while hiding it visually.
The Target ID
The link targets #main-content. You need to add id="main-content" to your theme’s main content wrapper for the link to work. In most themes this is the <main> element or the outermost <div> that wraps the page content. Check your theme’s template files and add the ID to the appropriate element.
Customising the Appearance
The inline styles in the snippet use a dark background and white text that contrasts clearly against most page designs. Adjust the colours, font, and border radius to match your brand. The only constraint is that the focused state must have a contrast ratio of at least 4.5:1 between the text and background colour to satisfy WCAG 1.4.3 (Contrast, Minimum).
add_action( 'wp_body_open', function() {
echo '<a class="skip-to-content" href="#main-content">Skip to content</a>';
} );
add_action( 'wp_head', function() {
?>
<style>
.skip-to-content {
position: absolute;
top: -100%;
left: 16px;
background: #0f172a;
color: #fff;
padding: 12px 20px;
border-radius: 0 0 8px 8px;
font-family: system-ui, sans-serif;
font-size: 14px;
font-weight: 600;
text-decoration: none;
z-index: 99999;
transition: top 0.2s;
}
.skip-to-content:focus {
top: 0;
}
</style>
<?php
} );
// Usage: Add id="main-content" to your main content wrapper in your theme.
// e.g. <main id="main-content">