Never remove the focus outline
Keyboard users need to see where focus is. Keep a visible focus indicator on every interactive element and style it with :focus-visible instead of removing it.
People who navigate with a keyboard, a switch device or voice control rely on the focus indicator to know where they are on the page. Removing it is like hiding the mouse pointer.
What WCAG requires
Success criterion 2.4.7 Focus Visible (level AA) requires a visible keyboard focus indicator. WCAG 2.2 adds 2.4.11 Focus Not Obscured, so sticky headers must not cover the focused element.
Style focus instead of removing it
Use :focus-visible so the ring appears for keyboard users without showing on every mouse click.
Warning: Never ship this
*:focus { outline: none; } removes the only cue keyboard users have, and fails WCAG 2.4.7.
Frequently asked questions
Is it okay to remove the outline if I add a different focus style?
Yes, as long as the replacement is clearly visible against its background in every state. Removing the outline without a replacement fails WCAG 2.4.7.
Why use :focus-visible instead of :focus?
:focus-visible lets the browser show the indicator when it is useful — for keyboard navigation — while avoiding a ring after every mouse click.