Detailed explanation
Resetting focus outlines removes the browser’s default visual indication of which element currently has focus. Providing accessible focus styles preserves that information, either through the default outline or a clearly visible replacement. This distinction matters because keyboard users navigate links, buttons, and form controls using keys such as Tab and Shift+Tab. Without a visible indicator, they may not know which control will respond when they press Enter or Space. Removing an outline does not remove focus or keyboard functionality; it removes an essential navigation cue.
Under the hood, the browser tracks a focused element, generally available through document.activeElement. CSS :focus matches that element regardless of how it received focus. The :focus-visible pseudo-class matches when the browser determines that a visible focus indicator is appropriate, using heuristics that consider input modality and the element involved. Keyboard navigation normally triggers it, while clicking a button often does not. However, it is not simply a keyboard-only selector: clicking a text input may still trigger :focus-visible because the control expects keyboard input.
A rule such as button:focus { outline: none; } is problematic on its own because it suppresses the default indicator without replacing it. A safer modern approach is to define button:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; } without globally removing outlines. The outline draws attention without changing layout dimensions, while the offset separates it from the component’s edge. The chosen colour is only an example: its visibility depends on surrounding colours and component states. Indicators should remain distinguishable on every supported background and must not be hidden by clipping or overlays.
In interviews, demonstrate that accessibility is about preserving a usable interaction state, not merely adding a decorative border. Explain that native interactive HTML provides focus behaviour, while CSS makes that state perceivable. Test the complete interface with keyboard navigation, including dialogs, menus, and disabled or dynamically updated controls. Also check forced-colours mode, where box-shadow-only indicators can disappear. If older browsers are supported, retain the native outline or provide a :focus-based fallback rather than assuming :focus-visible is universally available.
Key points to remember
- Removing an outline preserves focus but can make keyboard navigation impossible to follow.
- :focus matches the focused element; :focus-visible uses browser heuristics to decide when to show an indicator.
- Keep native focus outlines unless a clearly visible replacement is provided.
- Outline width, colour, offset, surrounding backgrounds, and clipping all affect visibility.
- Test keyboard navigation and forced-colours mode across interactive components.
Common mistakes candidates make
- Applying outline: none globally without a reliable replacement.
- Claiming that :focus-visible always means keyboard input and never matches mouse-focused controls.
- Using a faint colour change or box-shadow-only indicator without checking contrast and forced-colours behaviour.
Likely follow-up questions
Why use outline instead of border for a focus indicator?
An outline does not occupy layout space, so adding it does not change the element’s dimensions. A border can affect sizing or shift content unless its space is reserved beforehand.
How would you support browsers without :focus-visible?
Keep the browser’s default outline or define a visible :focus style as the baseline. Use an @supports selector(:focus-visible) block to apply any modality-specific refinements only where supported.
Does adding a focus style make a div accessible as a button?
No; styling alone does not supply focusability, button semantics, or keyboard activation. Prefer a native button, which provides these behaviours without recreating them with tabindex, ARIA, and event handlers.
Interview tip: Contrast removing the cue with replacing it, show a short :focus-visible rule, and explain how you would test it using Tab.