:focus-visible CSS Pseudo Class

The :focus-visible pseudo-class in CSS is a user-interface enhancement that targets elements when they receive focus in a way that is visibly noticeable to the user. Unlike the standard :focus pseudo-class, which applies whenever an element gains focus (for example, via keyboard, mouse, or script), :focus-visible specifically applies only when the browser determines that the focus should be visually indicated. This is particularly useful for improving accessibility, as it helps differentiate keyboard users from mouse users, avoiding unnecessary focus outlines for interactions that don’t require them.

The behavior of :focus-visible is often controlled by heuristics built into the browser. For instance, when a user navigates through a page using the Tab key, elements like links, buttons, or form fields will trigger :focus-visible to show a visual indication such as an outline or shadow. Conversely, clicking an element with a mouse might give it focus, but the pseudo-class may not activate, preventing the display of unnecessary focus styles that could visually clutter the interface.

A common application of :focus-visible is for accessibility-aware form styling. For example, developers can style inputs or buttons to show a clear focus ring only when it is needed:

<button>Click me</button>
<input type="text" placeholder="Enter text">

button, input {
  outline: none;
}

button:focus-visible,
input:focus-visible {
  outline: 2px solid blue; /* Visual cue for keyboard navigation */
  outline-offset: 2px;
}

In this example, the outline will appear only when the element receives keyboard focus, making the interface cleaner for mouse users while maintaining accessibility for keyboard users.

The pseudo-class works seamlessly with interactive elements, including a, button, input, and textarea, providing developers with a precise way to style focus cues without interfering with the general user experience. It is supported in modern browsers and is increasingly recommended for accessible web design practices.