Skip links and visible focus indicatorsWhat it checks and how to fix it

What it checks

Looks for a skip link (an in-page link labelled "skip to content" or similar) and for CSS that removes the focus outline (outline: none or 0 on :focus or *) without any :focus-visible rule to replace it. Either problem is a warning; a page with neither passes.

Why it matters

Without a skip link, keyboard users must tab through the whole header and navigation on every page before reaching the content. Removing the focus outline, often done to hide the ring on mouse clicks, leaves keyboard users with no idea which element is focused. Both are WCAG requirements (2.4.1 Bypass Blocks and 2.4.7 Focus Visible).

How to fix it

Add a skip link as the first element in <body>, visible when focused:

<a href="#main" class="skip-link">Skip to main content</a>
<header>...</header>
<main id="main" tabindex="-1">...</main>

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 1000;
  padding: 0.5rem 1rem;
  background: #fff;
}

If you remove the default outline for mouse users, restore it for keyboard users with :focus-visible:

:focus { outline: none; }
:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }