Primary Skip link is missing

Primary Skip link is missing — rule summary

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

Description

Skip links are used to allow users to skip verbose or repeated sections of a page such as navigation. This page does not have a primary skip link that allows users to bypass content. The page should be evaluated for the inclusion of a main skip link that will provide users an option to skip to the main content of the page and past the navigation links and/or top banner content.

How to fix

Add a keyboard-focusable skip link at the beginning of the page. It's best for a skip link to be one of the first few focusable items on the page.

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".

Skip links can be visible all of the time, or visually hidden until they receive keyboard focus. Don't use display: none to visually hide the skip link — that will make it unavailable to screen readers. Use off-screen positioning to visually hide it while keeping it in the DOM and focus order.

a.skip-link {
  /* styles to visually hide */
}
a.skip-link:focus {
  /* styles to display */
}

<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>