CSS :focus-visible: Smart Focus for Accessibility
:focus-visible is a smart focus ring that only appears when needed, like during keyboard navigation. This lets you style accessible focus indicators for keyboard users without showing an outline on every mouse click.
Why it exists
The original :focus pseudo-class applied a focus outline to every focused element, even buttons clicked with a mouse. Many developers found this visually jarring and disabled it with outline: none, which made websites completely inaccessible for keyboard-only users. :focus-visible was created to provide a smarter, context-aware solution.
The mental model
Think of :focus-visible as a polite focus indicator that only shows up when you might be lost. When you navigate with a keyboard, it's not obvious where you are, so the focus ring appears. When you click an element with a mouse, you already know where you are, so the ring stays hidden.
How it works
The browser uses built-in heuristics to decide when focus should be made visually evident. While :focus matches any element that currently has focus, :focus-visible only matches if those heuristics are met. The browser determines that a visual indicator is helpful during keyboard navigation or when focus is moved via script, but generally not when a user clicks a simple button with a mouse.
When to use it
Use :focus-visible to apply all your visual focus styles, like outlines, borders, or background colors. This is the modern, accessibility-first standard. It ensures keyboard and assistive technology users get a clear visual cue without forcing that same style onto mouse users who don't need it.
When not to use it
Avoid using :focus for visual styling; prefer :focus-visible. The main reason to interact with the general focus state is for non-visual logic, such as using JavaScript to identify the document.activeElement. Never use :focus-visible { outline: none; } — the point is to style the indicator, not remove it.
One canonical example
Consider a login form. When a user tabs from the email field to the password field and then to the "Log In" button, :focus-visible will trigger a styled outline on each element. However, if a mouse user clicks directly on the "Log In" button, no outline will appear, because the browser's heuristics determine it's unnecessary.
Interview question
A developer wants to provide clear visual focus indicators for keyboard navigation while keeping them hidden when elements are clicked with a mouse. Which approach is best?
- a.Rely solely on the browser's default :focus styling, as it automatically distinguishes between keyboard and mouse interactions.
- b.Use the :focus pseudo-class for styling, but ensure outline: none is applied to elements on mouse click events.
- c.Apply outline: none to all elements and then use JavaScript to add outlines specifically for keyboard events.
- d.Style the focus indicator using the :focus-visible pseudo-class and avoid overriding the default :focus outline.Correct
Why? this is the answer
The :focus-visible pseudo-class is designed to provide a smart, context-aware focus indicator that appears for keyboard navigation but not for mouse clicks. The card explicitly states that the original :focus applies to every focused element, including mouse clicks, making option A incorrect.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles