Skip to main content

Whole page

No working way to skip to the main content

WCAG 2.2 success criterion 2.4.1 Bypass Blocks (Level A)

WCAG 2.2
2.4.1 Bypass Blocks
Level
A
Default severity
Needs review
Available in
Free

Why it matters

Keyboard and screen reader users need a way past the header and menu on every page. Without a "Skip to content" link they must press Tab through dozens of menu links before reaching the post. A skip link that points at an ID that does not exist is worse: it is there, it gets pressed, and nothing happens.

Who it affects: Keyboard, screen reader and low-vision users — every visitor meets the page title, language, landmarks, keyboard focus, target sizes and zoom settings on every page.

What Lumtera flags

Checked in review mode's Whole page tab, on the rendered page. It looks for a skip link among the first three items that take keyboard focus: a link to #something. If there is none, that is a warning when the page also has no main landmark, and a tip when it has one. If the skip link points at an ID that is not on the page, that is an error.

How to fix it in WordPress

Add a "Skip to content" link as the first focusable item, pointing at the id of the element that wraps the main content (for example href="#main" and <main id="main">). Most accessibility-ready themes include one, and WordPress adds one automatically to block themes whose templates use a <main> element; it can stay hidden until it receives keyboard focus.

Example

Flagged on the rendered page
<body>
  <a class="skip-link" href="#content">Skip to content</a>
  <nav>…</nav>
  <main id="main">…</main>
</body>
Fixed
<body>
  <a class="skip-link" href="#main">Skip to content</a>
  <nav>…</nav>
  <main id="main">…</main>
</body>

How to check your fix

  1. Reload the page in review mode and run the Whole page tab again. The finding disappears once the rendered page passes.
  2. Load the page and press Tab: a "Skip to content" link should appear first, and you should always see where focus is, even under a sticky header. Pinch-zoom on a phone, and check the browser tab shows a meaningful title.

Check your pages with Lumtera

This check is free. Open any post, choose Accessibility in the admin bar, then the Whole page tab: Lumtera checks the page as your browser renders it, theme, menus and footer included, one page at a time. Lumtera Pro also checks on a daily or weekly schedule, fetching up to 25 key pages and templates from the server as a logged-out visitor, for pages that have neither a main landmark nor a working skip link, and emails you (or posts to Slack) when a new error appears.

Download Lumtera free Read the documentation

All checks

Start with the free plugin today

All 64 checks, the editor sidebar, Elementor panel and site report — free, with no account and no page limits.

Download freeSee Pro plans