Free scan

Fix "Invisible focus indicator" in HTML

Why it's a problem

A keyboard user must always see where they are. An “outline: none” added for looks erases that cue: each Tab moves focus with nothing changing on screen. Our check focuses the page's first interactive elements and flags the case where none shows an outline or shadow on focus.

How to fix it — HTML

Never remove the focus outline without replacing it. With :focus-visible it only shows for keyboard navigation, not on click — the usual reason it was removed. If your focus uses another style (border, background), the check cannot see it: verify by tabbing through the page.

Avoid
<style>
  a:focus, button:focus { outline: none; }
</style>
Correct
<style>
  /* Visible au clavier, discret à la souris */
  a:focus-visible, button:focus-visible {
    outline: 3px solid #171e19;
    outline-offset: 2px;
  }
</style>

Check your site in 30 seconds

Conformly detects this kind of issue across all your pages, continuously, and alerts you on every regression.

Free scan

Other fixes