March 15, 2022 · reala11y team

Skip Links and ARIA Landmarks: Bypass Repeated Navigation

Skip links and ARIA landmarks let keyboard and screen-reader users jump past repeated navigation (WCAG 2.4.1). Here's how they work on WordPress and how to add them.

Open most WordPress themes with a screen reader or a keyboard, and the first thing you meet is the menu. Then the menu again on the next page. And the next. For a sighted mouse user this is invisible; you simply look past it. For someone tabbing through the page or listening to it read aloud, every page starts with the same twenty-link detour before the actual content.

That detour is what WCAG 2.4.1 (Bypass Blocks, Level A) asks you to solve. It is one of the oldest and most consequential success criteria, and it is also one of the most fixable.

What “bypass blocks” actually means

The criterion is short: provide a way to skip over blocks of content that repeat across pages. In practice there are two complementary mechanisms, and good themes use both.

Skip links — a focusable link, usually the very first element after <body>, that jumps focus straight to the main content.
ARIA landmarks — semantic regions (<header>, <nav>, <main>, <footer>) that let assistive technology offer a “jump to region” menu.

They serve overlapping audiences. Skip links help keyboard users who do not run a screen reader. Landmarks help screen-reader users navigate by region. Implementing one does not excuse you from the other.

A skip link is plain HTML:

<a class="skip-link screen-reader-text" href="#main">Skip to content</a>

Two details trip people up. First, the target must exist and be focusable — <main id="main" tabindex="-1"> — or focus has nowhere to land. Second, the link is commonly hidden until focused, which is correct, but it must become visible on focus. A skip link the user cannot see when they tab to it is no better than no skip link at all.

Landmark roles

Modern HTML5 elements carry implicit landmark roles, so you often get them for free:

<header> → banner
<nav> → navigation
<main> → main
<footer> → contentinfo

The common failures are a missing <main>, several <nav> elements with no aria-label to tell them apart, or a theme that builds its header from <div>s and never declares the region at all. When the landmarks are right, a screen-reader user presses one key and skips the entire navigation block — exactly what 2.4.1 is after.

Why this is more than a checkbox

WCAG became a sharper concern recently. WCAG 2.1 landed in 2018; WCAG 2.2 became a W3C Recommendation on 5 October 2023. The US DOJ’s ADA Title II web rule (April 2024) set a conformance target for state and local government sites, and the European Accessibility Act became enforceable on 28 June 2025. Bypass Blocks is Level A — the floor, not the ceiling — so it shows up in essentially every audit and legal reference.

It is also a criterion where automation genuinely helps, because the signals are in the markup: is there a skip link, does it point at a real target, is there a single <main>. A scanner can read all of that.

How reala11y approaches it

reala11y scans your rendered pages for the markup behind 2.4.1 and the related landmark structure (WCAG 1.3.1) — flagging a missing skip link, a skip link whose target does not exist, or a page with no main landmark. Because reala11y works on the HTML your theme actually outputs rather than bolting on a visitor-side script, the fixes it surfaces are real source-level changes, not a layer painted over the problem. That is the whole point of the code-level approach: a screen reader sees the corrected page, because the page itself is corrected.

A note on honesty: detecting these issues is not the same as guaranteeing a result. Automated tooling — ours included — typically catches only 30–40% of WCAG issues by criteria. Skip links and landmarks fall inside the slice a machine can reliably check; whether your skip link lands somewhere useful, and whether your reading order makes sense once navigation is bypassed, still needs a human to verify. We pair automated scanning with manual review, and we point you to the WCAG 2.2 guides when you want the reasoning behind a rule.

A short checklist

One skip link, first in the DOM, visible on focus, pointing at a real #main.
Exactly one <main> per page.
<header>, <nav>, <main>, <footer> present, with aria-label on any duplicated <nav>.
Tab through the page yourself: can you reach the content in one keystroke?

The honest takeaway

Skip links and landmarks are among the cheapest, highest-impact things you can fix on a WordPress site — a handful of attributes that spare keyboard and screen-reader users the same detour on every page. A scanner can tell you whether the structure is there. It cannot tell you whether the experience is good. Fix the markup, then tab through it yourself, ideally with a screen reader on. That combination — code-level fixes plus a few minutes of real keyboard testing — moves you meaningfully toward WCAG 2.2 AA conformance, which is the only claim worth making.