Skip link has invalid target

Skip link has invalid target — rule summary

Field	Value
Rule code	Html_SkipLink_Target_Invalid
WCAG conformance level	A
WCAG success criterion	2.4.1 Bypass Blocks
Must be fixed at source	No

Description

This skip link points to a target that we did not find in the page. Ensure the skip link href attribute correctly identifies an anchor in-page that can be focused to and scrolled-to. If a skip link does not point to a valid target (focusable and scrollable-to), it renders the skip link functionality unusable.

How to fix

The target of the skip link should be the main container, or the first item inside. If you need to focus an element that isn't focusable by default (such as a heading), add tabindex="-1". Make sure that the href of the skip link matches the id of the target element.

<nav>
<ul>
<li><a href="#main" class="skip-link">Skip to main content</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/contact">Contact Us</a></li>
<li><a href="/about">About Us</a></li>
</ul>
</nav>
…
<main id="main" tabindex="-1">
…
</main>