Page must have a means to bypass repeated blocks
Estimated effort: about 15 minutes.
Keyboard-only users must be able to skip past repeated content — a site header, navigation menu, or a long promo banner — to reach the main content directly, instead of tabbing through every menu link on every single page. A page needs at least one of: a working skip link, a heading structure, or a landmark region (like <main>) to make this possible.
How to fix it
- Confirm the page has at least one of the following: a visible-on-focus "Skip to content" link near the very top of the page, a proper heading structure starting with an <h1>, or a <main> landmark wrapping the primary content.
- If a skip link exists but does nothing when activated, check that its href (e.g. href="#content") points to an id that actually exists on the page's main content wrapper (e.g. id="content" on the <main> element) — a skip link with no matching target is effectively broken.
- If the theme or page builder was customized to remove or replace the default main-content wrapper (for example, switching a page to a "full width" or "canvas" template), check whether that customization also removed the id the skip link is supposed to jump to.
- If no skip link exists at all, add one as the very first focusable element in <body>, hidden visually by default but shown when it receives keyboard focus, linking to the id on the <main> element.
- Tab to the very first element on the page (before clicking anything) and confirm a "Skip to content" link becomes visible and, when activated, moves focus into the main content area.
Elementor note
Elementor's Hello theme ships with a built-in "Skip to content" link that by default targets the #content id via the hello_elementor_skip_link_url filter (documented at developers.elementor.com/docs/hello-elementor-theme/hello_elementor_skip_link_url). A known, publicly reported issue (elementor/hello-theme GitHub issue #217) is that pages set to certain full-width/canvas templates in Elementor can lose the <main id="content"> wrapper the skip link depends on, which breaks the skip link even though it is still visible. If a page's skip link does nothing, check whether that page's template still outputs an element with id="content".
Before and after
Before
<body>
<header>...long navigation menu...</header>
<div class="page-content">
<h1>Shop</h1>
...
</div>
</body>
After
<body>
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
<header>...long navigation menu...</header>
<main id="content">
<h1>Shop</h1>
...
</main>
</body>