Visible Focus Outline (Accessibility)
Hides the focus ring for mouse/touch users while preserving a clear, high-contrast outline for keyboard navigation.
CSSby SnipCraft
css
/* Hide outline only when using mouse or touch */
:focus:not(:focus-visible) {
outline: none;
}
/* Show a clear outline for keyboard navigation */
:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 3px;
border-radius: 2px;
}
/* Honour high-contrast mode */
@media (forced-colors: active) {
:focus-visible {
outline: 3px solid ButtonText;
}
}#a11y#accessibility#css#focus#keyboard