Keyboard navigation supportWhat it checks and how to fix it

What it checks

Checks the page for keyboard support: a skip link to the main content, no elements with a positive tabindex, no :focus rule that removes the outline without a box-shadow, border or background replacement, no buttons without accessible text, and no focus traps in Lighthouse's audit. A removed focus outline or a focus trap fails; any other issue is a warning.

Why it matters

Many people navigate with the keyboard alone: power users, people with motor impairments and screen reader users. Without a visible focus indicator they cannot see where they are; a positive tabindex scrambles the tab order; a focus trap makes the rest of the page unreachable. These are WCAG failures that make a site unusable for that audience.

How to fix it

Keep focus visible, leave the tab order to the DOM, and add a skip link.

/* Never remove the outline without a replacement */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

Replace positive tabindex values with the natural order (rearrange the HTML instead):

<input tabindex="3">   <!-- remove -->
<div tabindex="0" role="button">...</div>   <!-- 0 and -1 are fine -->

Add a skip link as the first focusable element:

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

Finally, tab through the page yourself: every control should be reachable, visibly focused, and escapable (Esc closes modals and returns focus to the opener).