:focus shows outline on mouse clicks (annoying). :focus-visible shows only for keyboard navigation.
Old Way (:focus):
button:focus {
outline: 2px solid blue;
}
/* Problem: Shows outline when clicked with mouse
Users disable it: outline: none; (BAD for accessibility!) */
Better Way (:focus-visible):
button:focus {
outline: none; /* Remove default */
}
button:focus-visible {
outline: 2px solid blue;
}
/* Outline only shows when:
- Tabbing with keyboard
- Screen reader navigation
NO outline when:
- Clicking with mouse
- Touch on mobile */
Result:
Mouse users: Clean UI, no outlines
Keyboard users: Clear focus indicators
= Best of both worlds!
Browser Support: 96% (all modern browsers)