:focus-visible — visible focus that respects mouse users

The most-broken a11y pattern: outline: none

Every CSS reset zeroes out browser focus rings ("ugly default outline!"). The result: keyboard users can't see where focus is. Tabbing through your site is invisible. WCAG-fail.

/* WORST — never do this */
*:focus { outline: none; }

/* BETTER — only style focus when keyboard-triggered */
button:focus-visible {
  outline: 2px solid #3B82F6;
  outline-offset: 2px;
}

:focus-visible vs :focus

• `:focus` matches whenever the element has focus (keyboard OR mouse click).
• `:focus-visible` matches only when focus is "obviously needed" — keyboard tab, programmatic focus, but NOT a mouse click on a button.

So you can have a beautiful focus ring for keyboard users WITHOUT the "clicked button shows ring" mouse experience that designers hate.

Don't remove, replace

If the default outline doesn't match your design, replace it with a custom focus style:

button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
  border-radius: 8px;
}

Always have SOMETHING visible on focus. Never outline: none without a replacement.