Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Antihost offers managed WordPress hosting with free migration, one-click staging and a 14-day free trial.
Put a “Skip to content” link before every other focusable element, point its fragment to the primary <main> region, and make sure the link is visible on focus and places focus inside that region. Classic themes require a small markup and CSS change; block themes can generate the link when the primary content wrapper is assigned the main landmark. Test every page template, not only the front page.
What a skip link does
A skip link is a keyboard-accessible link that lets someone bypass repeated material—such as a site header, navigation menu, search controls, promotional bars, and social links—and reach the page’s primary content. It is normally the first focusable control in the document. A keyboard or screen-reader user can press Tab once, activate the link, and avoid stepping through the same header controls on every page.
WordPress describes skip links as “a mechanism that enables users to navigate directly to content or navigation on entering any given page.” WCAG 2.1 Success Criterion 2.4.1 (Bypass Blocks) requires that “a mechanism is available to bypass blocks of content that are repeated on multiple web pages.” The requirement is about a usable bypass mechanism, not merely text that happens to say “skip.”
- The link must be reachable before the repeated header and navigation controls.
- Its fragment (for example,
#content) must match theidon the destination. - A visually hidden link must become clearly visible when it receives keyboard focus.
- Activating it must take the user into the main content, with focus continuing from there rather than remaining in the header.
The four parts every implementation needs
1. A first-focusable link
Place the anchor before the header, navigation, search form, skip-to links supplied by another component, or any other element that can receive focus. The link may sit outside a landmark; its position in the focus order is what matters. Putting it inside a navigation list defeats the purpose because the user has to tab through that navigation before reaching it.
#1 Best Overall
2. A matching destination
If the link is href="#content", the destination must have exactly id="content". Fragment matching is case-sensitive in practice, so do not mix values such as #Content and id="content". Keep the identifier unique on each page.
3. A focus-visible state
It is fine for the link to be visually hidden while it is not being used, provided it remains available to assistive technology and appears when focused. The focused state needs enough contrast, padding, and stacking order to remain readable over a sticky header.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errors4. Focus inside the main region
Scrolling to the main area is not sufficient if keyboard focus remains on the skip link. Give the target a focus strategy so that pressing Tab after activation starts in the main content instead of returning the user to the header. A non-interactive <main> can use tabindex="-1"; where a browser or theme still leaves focus on the link, a small click handler can focus the target.
Classic-theme implementation
Step 1: Find the files that output the document shell
In a classic theme, the opening <body> and site header are commonly in header.php, while the primary content element may be in a page, post, archive, or index template. Use a child theme or a maintained custom theme so an update does not overwrite your change. Do not edit a parent theme directly if you need the change to persist.
Step 2: Add the link before the header and navigation
Insert the anchor immediately after the opening body output and before any focusable header control:
Rank #2
<body>
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
<header>…</header>
<nav>…</nav>
<main id="content" tabindex="-1">
<!-- page content -->
</main>
</body>The official WordPress Accessibility Team pattern uses the matching href="#content" and <main id="content"> pattern. The class name is conventional: use the theme’s existing screen-reader utility when it has one, but verify that its focus rules do not hide the link when it is focused.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallStep 3: Put the target on the real primary-content wrapper
There should be one primary <main> landmark for the page. Put id="content" on that element, not on a decorative wrapper above it. If different templates generate different main wrappers, apply the same identifier and focus treatment to each one. Never create duplicate id="content" elements in a single document.
Adding tabindex="-1" lets script or browser fragment handling place focus on the otherwise non-tabbable main element without adding it to the normal Tab sequence. It is not the same as tabindex="0", which would insert the region into ordinary keyboard navigation.
Step 4: Add or verify the CSS
Use the theme’s utility class if it is reliable. Otherwise, a minimal fallback is:
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100000;
}
.skip-link:focus {
left: 1rem;
top: 1rem;
padding: .75rem 1rem;
background: #fff;
color: #000;
}The off-screen position keeps the link out of the visual layout but not out of the accessibility tree. The :focus rule must override every hiding declaration from .screen-reader-text or a component stylesheet. If your theme uses clip, clip-path, width: 1px, or overflow: hidden to hide text, add a sufficiently specific focus rule that resets those properties as well.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
For a sticky header, add a scroll offset so the destination is not covered after activation:
main:focus {
outline: none;
}
main {
scroll-margin-top: 5rem;
}Only remove the default outline if you provide another visible focus indicator for the main region. A visible outline or equivalent styling is safer than removing it altogether.
Step 5: Guarantee focus movement when needed
First test the native link with tabindex="-1". If the browser or theme scrolls to the target but leaves focus on the anchor, add a small progressive-enhancement script after the page markup:
document.querySelectorAll('.skip-link').forEach(function (link) {
link.addEventListener('click', function (event) {
var target = document.getElementById(link.hash.slice(1));
if (!target) return;
event.preventDefault();
target.focus({ preventScroll: true });
target.scrollIntoView();
});
});The script checks that the target exists, prevents a broken fragment navigation, focuses the main region, and then scrolls it into view. If your site supports older browsers that do not accept the options object for focus(), call target.focus() and then target.scrollIntoView() instead. Keep the link usable without JavaScript where the browser correctly handles focus itself.
Block-theme route: let WordPress generate the link
Assign the main landmark in the Site Editor
Block themes can create the Skip to Content link from the document structure. Open the Site Editor, edit the template that contains the primary page content, and select the Group, Template part, or Query block that wraps that content. In the block’s Advanced settings, set its HTML element or landmark to main. WordPress then generates the skip link for that template.
Make the change in every template that can be reached by visitors. A home template may be correct while the blog archive, single post, page, search results, or a custom template still lacks a main landmark. The generated link is only as dependable as the template structure that produces it.
Understand the resulting structure
An equivalent block comment structure is:
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- content blocks -->
</main>
<!-- /wp:group -->The exact classes may differ with the theme, but the important result is one primary main landmark around the content. Do not add a second manually coded skip link if WordPress is already generating one unless you have a specific, tested reason; duplicate links can create unnecessary stops in the focus order.
Use the Navigation block for site menus
The Navigation block supplies responsive and keyboard navigation behavior, a navigation landmark, and the relevant ARIA attributes without additional menu code. It does not replace the page-level skip link: the navigation still belongs in the repeated content that the user should be able to bypass.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Best Value
Classic and block themes compared
| Decision point | Classic theme | Block theme |
|---|---|---|
| Where you start | Child-theme template files, usually the body/header and content templates | Site Editor template and the block wrapping primary content |
| How the link appears | You add the anchor and its destination markup | Assigning the primary wrapper the main landmark lets WordPress generate it |
| Target consistency | Keep the anchor fragment and main id identical in every template |
Keep a single main landmark in every template; confirm generated markup on the front end |
| Focus visibility | Verify the theme’s screen-reader utility and add a focused state if necessary | Inspect the generated link and theme styles; a generated link still needs a visible focus state |
| Typical failure | Anchor is placed after the menu or a template omits the target | Only one template receives the main landmark, so other page types have no working skip link |
Keyboard-test every page template
Test an unauthenticated front-end view in a private window or another browser so editor toolbars, admin bars, and development extensions do not change the Tab order. Repeat the sequence for the home page, blog archive, single post, standard pages, search results, and every custom template your site serves.
- Refresh the page with focus at the top of the document.
- Press Tab once. The first focusable item should be “Skip to content” or equivalent—not the logo, menu toggle, search field, cookie control, or a social link.
- Confirm that the link becomes visibly identifiable when focused. Check contrast, readable text, position, and whether a sticky header covers it.
- Press Enter (or Return). The viewport should move to the main area.
- Press Tab again. Focus should continue at the first focusable control in the main content, bypassing header and navigation controls.
- Reload and repeat on the next template. A successful test on the home page does not establish that archives, posts, pages, or search templates work.
Also test with the browser zoomed and with a keyboard-only workflow. A link that is technically present but clipped, covered, or impossible to see when focused is not a practical bypass mechanism.
Troubleshoot the failures that matter
| What you observe | Likely cause | Fix |
|---|---|---|
| Tab lands on the logo or menu first | Another focusable element precedes the link, or the link was put inside the navigation list | Move the anchor immediately after the opening body output and before the header’s focusable controls |
| The link appears, but activation only scrolls | The destination is not focusable and no focus handoff occurs | Add tabindex="-1" to the main target and test again; use the click-focus fallback if focus still remains on the link |
| Activation does nothing | The fragment and target id do not match, or the target is absent on that template |
Compare the values character for character and inspect the rendered front-end HTML |
| The link is invisible when focused | The screen-reader utility’s hiding declarations override the focus rule, or another layer covers it | Override the hiding properties in :focus, raise the z-index, and give it a contrasting background |
| Focus lands under a sticky header | The main region is scrolled to the top edge without an offset | Use an appropriate scroll-margin-top value and retest at the site’s normal zoom |
| Home works but posts or search do not | Those requests use different templates or block structures | Apply the same destination and landmark treatment to each template and rerun the complete checklist |
| Two skip links appear | A manually coded link duplicates the one generated by a block theme or plugin | Keep the single link that provides the correct first focus stop, unless separate independent regions genuinely require additional links |
When more than one skip link is appropriate
One link to the primary content is sufficient for most sites. WordPress permits multiple skip links—for example, to the main navigation, content, and footer—when a design has several independent menus or content regions that users may reasonably want to bypass. Add another link only when it leads to a distinct, useful landmark and maintain a predictable order: navigation first, primary content next, then other major regions. Each fragment must point to a unique target, and every link must meet the same visibility and focus requirements.
Implementation checklist
- The first Tab stop on the public page is the skip link.
- The link is outside the navigation list and before repeated header controls.
- The fragment and destination
idmatch exactly and are unique. - The destination is the page’s single primary
mainregion. - The hidden link becomes visible on keyboard focus with readable contrast.
- Activating the link moves focus into the main content, not merely the viewport.
- Sticky headers do not cover the focused destination.
- Home, archive, single, page, search, and custom templates have been tested independently.
- A block theme assigns the primary content wrapper the
mainlandmark, or a classic theme outputs equivalent markup.
Bottom line
A reliable WordPress skip link is a small structural feature with four non-negotiable properties: it comes first in the focus order, targets the correct main landmark, appears when focused, and transfers focus into the content. Add those pieces directly in a classic theme or assign the main landmark in each block-theme template, then verify the result with a keyboard on every page type your site publishes.
Recommended Free Tools
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
