Focus ring
The visible outline drawn around the element that currently has keyboard focus.
The focus ring is what tells a keyboard user which element will receive their next key press. WCAG 2.2 requires a visible focus indicator that contrasts with both the element and the background. Browsers draw a default focus ring on focusable elements (buttons, inputs, links). The CSS pseudo-class `:focus-visible` lets you style the focus ring only for keyboard focus, hiding it for mouse clicks where it would be visual noise. Removing the focus ring without replacing it (`outline: none`) is one of the most common accessibility regressions on the web.
Also called
When to use
- Always — every focusable element needs a visible focus state
- Custom interactive elements that don't get one by default
- Replacing the default ring with a higher-contrast style
When not to use
- Hiding focus rings without replacing them (this breaks keyboard use)
- Mouse-only focus where :focus-visible can suppress it cleanly
- Focus rings so subtle they fail WCAG contrast requirements
Related
Source
WCAG 2.2 Success Criterion 2.4.7 (Focus Visible) and 2.4.13 (Focus Appearance). CSS `:focus-visible` is in CSS Selectors Level 4. Apple and Material both define focus ring styles in their systems.