Understanding CSS Focus States: `:focus` vs `:focus-visible`

Focus states in CSS help make websites accessible and user-friendly, especially for keyboard users and those using assistive technologies. The :focus and :focus-visible pseudo-classes allow developers to style elements when they are active, improving usability and accessibility.

A focus state occurs when an interactive element—like a button, link, or input—is active, usually through Tab key navigation or a mouse click.

CSS provides two main pseudo-classes for focus states: :focus and :focus-visible.

`:focus` vs `:focus-visible`

`:focus` Pseudo-Class

The :focus pseudo-class styles an element whenever it gets focus, whether by mouse, keyboard, touch, or JavaScript. It’s commonly used for buttons, inputs, and links. Because it applies to all focus events, it can sometimes look distracting for mouse users. Always keep a clear focus style, rather than removing it, to ensure accessibility.

Example:

button:focus {
  outline: 3px solid #007BFF; /* Universal focus indicator */
  outline-offset: 2px;
}

`:focus-visible` Pseudo-Class

The :focus-visible pseudo-class styles an element only when it’s meaningful, usually for keyboard navigation or assistive technology users. Mouse clicks typically don’t trigger it, keeping the interface cleaner. It ensures keyboard users see a clear focus indicator without cluttering the UI for mouse users.

Example:

button:focus-visible {
  outline: 3px solid #FF6200; /* Keyboard focus indicator */
  outline-offset: 3px;
  box-shadow: 0 0 5px rgba(255, 98, 0, 0.5);
}

Key Differences:

Feature	`:focus`	`:focus-visible`
Trigger	All focus events (mouse, keyboard, touch, script)	Primarily keyboard or assistive tech focus
Use Case	General focus styling	Keyboard-specific, accessibility-first styling
Visual Impact	Can be distracting on mouse clicks	Reduces clutter, appears only when needed
Browser Support	Universal	Modern browsers (2020+)
Accessibility Risk	High if default styles removed	Low; respects browser heuristics

Example 1: Accessible Login Form

<a href="#main-content" class="skip-link">Skip to Main Content</a>
<form>
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" id="username" placeholder="Enter username">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" id="password" placeholder="Enter password">
  </div>
  <button type="submit">Log In</button>
</form>

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #1a73e8;
  color: white;
  padding: 8px;
  z-index: 100;
}
.skip-link:focus { top: 0; }

input, button {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}

/* Focus Styles */
input:focus, button:focus {
  outline: 2px solid #1a73e8; /* Fallback */
}
input:focus-visible, button:focus-visible {
  outline: 3px solid #ff6200;
  outline-offset: 3px;
  box-shadow: 0 0 5px rgba(255, 98, 0, 0.5);
}
button { background: #1a73e8; color: white; border: none; cursor: pointer; }
button:hover { background: #1557b0; }

Example 2: Keyboard-Friendly Navigation Menu

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

nav { background: #333; padding: 10px; }
ul { list-style: none; display: flex; gap: 15px; margin: 0; padding: 0; }
li a { color: white; text-decoration: none; padding: 10px 15px; border-radius: 4px; display: block; }
li a:hover { background: #555; }
li a:focus { outline: 2px solid #fff; outline-offset: 2px; }
li a:focus-visible { outline: 3px solid #ffeb3b; outline-offset: 3px; background: #444; }