Focus Visible Pseudo Class
The :focus-visible pseudo-class is a CSS selector that applies styles only when an element receives focus via keyboard navigation or other non-pointer input methods, while ignoring focus from mouse or touch interactions. It helps improve accessibility by providing visual feedback for keyboard users without disrupting the visual design for mouse users. This is part of the CSS Selectors Level 4 specification and is supported in modern browsers.
Developers should use :focus-visible to create accessible web interfaces that comply with WCAG guidelines, particularly for users who rely on keyboards, screen readers, or other assistive technologies. It's essential in forms, navigation menus, and interactive components to ensure keyboard focus is clearly visible without adding unnecessary visual clutter for mouse users. This improves user experience and accessibility while maintaining clean design.