How to let keyboard users skip repeated content?

bypass page

The issue

On a page with no way to skip ahead, a keyboard user tabs through every link in the header and navigation before reaching the content, on every page they visit. A screen reader user has no headings or landmarks to jump by either, so the only route through the page is from the top.

The cause is a page built without structure: no <main>, no headings, no skip link. It is most common on templates assembled from generic <div> elements. WCAG 2.4.1 requires a way to bypass blocks of content that repeat across pages.

Scope

Each page is checked once. It passes if it has any of these: a link to #id whose target exists on the page, a landmark such as <header>, <nav>, <main> or <footer>, or a visible heading from <h1> to <h6>. It is reported, on the <html> element, only when it has none of them.

This is a minimum. A page can pass on a single heading and still be slow to get through, so a page that passes isn’t necessarily easy to navigate.

How to check you have it

In probeo: the page reports bypass, “Page must have means to bypass repeated blocks”, as serious, under WCAG 2.4.1.
By hand: load the page and press Tab once. A skip link should appear. Then look for <main> and headings in the source.
With a tool: axe DevTools has a rule with the same name. A screen reader’s landmarks and headings lists show what there is to jump to.

The fix

Add a <main> landmark around the page’s content and a skip link to it as the first focusable element.

Landmarks and headings let screen reader users jump; a skip link is what keyboard users without a screen reader rely on. Put the skip link first inside the <header>, so it is still the first thing focused and sits inside a landmark, and keep it hidden until it receives focus.

<header>
  <a href="#main" class="skip-link">Skip to content</a>
  …
</header>
<main id="main">
  <h1>Page title</h1>
  …
</main>

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; }

Done when: the page has a <main> landmark, real headings and a working skip link, and the check above comes back clean.

Do not

Do not point a skip link at an id that doesn’t exist on the page.
Do not hide the skip link with display: none; it can’t receive focus then.
Do not style <div> elements as headings in place of real heading elements.

FAQ

This check passes with landmarks alone. A skip link still helps keyboard users who don’t use a screen reader, since they can’t jump by landmarks.

Why is the report on the html element?

Because it is about the page as a whole, not any one element.

Does a hidden heading count?

No. Only visible headings count toward passing this check.

Which product detects this

Probeo checks this on every page of your site as part of Site Clarity. This page explains one instance; the product tells you every page that has it.