Why It Matters
Focus indicators show keyboard users exactly which element they are interacting with. Without them, navigating a page is like trying to use a mouse with an invisible cursor. WCAG 2.2 introduces stricter requirements for focus appearance (Success Criterion 2.4.13).
The Requirement
- Contrast: The focus indicator must have a 3:1 contrast ratio against adjacent colors.
- Size: The area of focus indication must happen on the perimeter or have a minimum thickness.
- Not Obscured: The item receiving focus must be at least partially visible.
Custom Solution
Avoid default browser outlines if they clash, but never remove outlines without replacing them.
/* Remove default outline safely */
:focus {
outline: none;
}
/* Add custom focus style */
:focus-visible {
outline: 3px solid #C75B39; /* Brand color */
outline-offset: 2px;
border-radius: 4px;
box-shadow: 0 0 0 4px rgba(199, 91, 57, 0.2);
}
Using :focus-visible ensures that mouse users don't see the outline when clicking, but keyboard users do.