Keyboard Navigation Styles
:focus-visible shows focus rings only when the browser determines keyboard input is in use — a clean, accessible default that removes rings for mouse clicks while preserving them for Tab navigation.
Quick implementation
/* Remove default focus ring on all interactive elements */
:focus {
outline: none;
}
/* Restore visible ring only for keyboard navigation */
:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
/* Custom per-component styles */
.btn:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 4px;
}
/* Inputs should always show focus — override for form fields */
input:focus,
textarea:focus,
select:focus {
outline: 3px solid var(--accent);
outline-offset: 2px;
border-color: var(--accent);
}
/* Nav links — tighter ring on text */
.nav a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 2px;
}
/* Never do this — removes all focus indicators, WCAG fail */
/* *:focus { outline: none; } */Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are an accessibility-focused CSS developer. Implement keyboard navigation focus styles for a design system.
Requirements:
1. Set :focus { outline: none } globally, then :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px } to show rings only for keyboard navigation.
2. Explain the difference: :focus fires on click AND keyboard; :focus-visible fires when the browser's heuristic determines keyboard input — so buttons get no ring on click but do on Tab.
3. Form elements (input, textarea, select) are an exception — always show :focus (not just :focus-visible) because users expect to see which field they are editing regardless of input method.
4. Show how to use outline (not box-shadow or border) for focus rings — outline is immune to overflow: hidden clipping, renders on top of content, and is respected by Windows High Contrast Mode.
5. Show outline-offset: 3px — this creates a gap between the element and the ring that improves visual clarity, especially on dark backgrounds.
6. Add a note: WCAG 2.4.11 (Focus Appearance, AA in 2.2) requires the focus indicator to have a minimum area and contrast ratio. An outline of 2px or more with sufficient contrast meets this.
Constraints:
- Never write *:focus { outline: none } without immediately restoring :focus-visible — it creates a WCAG 2.4.7 failure (No Focus Visible).
- Do NOT use box-shadow for focus rings on Windows — box-shadow is invisible in forced-colors/HCM mode.
- Use outline shorthand: outline: 3px solid color — not outline-width + outline-style + outline-color separately.
Output a complete CSS reset section covering :focus, :focus-visible, inputs, and nav links with brief comments.Why this matters in 2026
Keyboard navigation is essential for users who cannot use a mouse — people with motor disabilities, power users, and anyone on a device without a pointing device. WCAG 2.4.7 (AA) requires that all keyboard-focusable elements have a visible focus indicator. The historical pattern of outline: none on :focus to suppress the ring for mouse users — while aesthetically motivated — creates a critical barrier for keyboard-only users. :focus-visible resolves this tension: it is the browser's built-in heuristic for when a focus ring is actually needed.
The logic
The browser's :focus-visible heuristic considers the input method and element type. If focus moves via Tab, arrow keys, or the keyboard shortcut for a skip link, :focus-visible matches. If focus moves via mouse click on a button, it typically does not. Form fields (input, textarea, select) always match :focus-visible because the browser knows users need to see which field they are editing. The outline property is the correct tool for focus rings — it renders outside the element box without affecting layout, is immune to overflow: hidden clipping, and remains visible in Windows High Contrast Mode (unlike box-shadow).
Accessibility & performance
WCAG 2.4.11 (Focus Appearance, new in WCAG 2.2 AA) adds specific requirements: the focus indicator must have a minimum perimeter equal to the element's perimeter, and the indicator color must have a 3:1 contrast ratio against adjacent colors. A 3px solid accent outline on a dark background comfortably satisfies both. There is no performance cost to focus styles — they are painted properties that do not trigger layout. Always test by unplugging your mouse and navigating the entire page with Tab and Shift+Tab.