No working way to skip to the main content

Why does it matter?

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 does Lumtera flag?

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: an in-page link whose words ("Skip to content", in many languages), class or target (such as #main) say it skips the header. A menu link to #1 or a script route such as #/home is not taken for a skip link. If there is none, that is for review 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. The keyboard walk in the Keyboard tab also follows the skip link and flags, for review, a target that cannot be seen once the link is used.

Check IDs page-skip-broken, page-no-skip, as shown in review mode and saved results.

How do I 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

<body>
  <a class="skip-link" href="#content">Skip to content</a>
  <nav>…</nav>
  <main id="main">…</main>
</body>

<body>
  <a class="skip-link" href="#main">Skip to content</a>
  <nav>…</nav>
  <main id="main">…</main>
</body>

How do I check the 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.