Focus Visible
Every interactive element must have a visible focus indicator when navigated to via keyboard. Never use outline:none without a replacement. WCAG 2.2 adds 2.4.11 (Focus Appearance) requiring minimum area and contrast.
When you move around with the keyboard, a clear outline must show where you are — like a cursor for the Tab key.
WCAG 2.4.7 (Level AA) requires a visible focus indicator. WCAG 2.4.13 Focus Appearance (Level AAA, new in 2.2) goes further: the indicator must be at least 2px thick around the perimeter with 3:1 contrast between focused and unfocused states.
The :focus-visible CSS pseudo-class is the modern solution — it shows focus rings for keyboard navigation but hides them for mouse clicks, satisfying both designers and accessibility requirements.
Why this matters
Focus visibility fails on 68% of homepages. Keyboard users need to see where they are — removing outline:none without a replacement makes the page feel like navigating in the dark. This is especially critical for users with motor disabilities who can't simply click where they want to go.
How to detect
Tab through the page. Can you see a clear focus indicator on every interactive element? Check custom components, links inside dark backgrounds, and elements where the default outline was removed.
How to fix
/* Never do this without a replacement */
*:focus { outline: none; } /* ✗ */
/* Use :focus-visible for keyboard-only indicators */
:focus-visible {
outline: 2px solid #18181b;
outline-offset: 2px;
}
/* For dark backgrounds, use a light ring */
.dark-section :focus-visible {
outline-color: #fafafa;
}
/* Minimum for WCAG 2.4.13 (AAA) */
:focus-visible {
outline: 2px solid currentColor; /* ≥3:1 contrast */
outline-offset: 2px; /* ≥2px perimeter */
}