HuntExams Academy
HTML/CSSAdvanced#css#pseudo-classes#accessibility

What is the difference between :focus and :focus-visible?

:focus applies to any focused element, including after a mouse click, which can produce unwanted outlines. :focus-visible applies only when the browser determines focus should be visibly indicated — typically from keyboard navigation — giving cleaner UX for mouse users while preserving accessibility for keyboard users.

Example
button:focus { outline: none; } /* removes for all */
button:focus-visible { outline: 2px solid blue; } /* only shows for keyboard nav */

Related Questions

1
HTML/CSSIntermediate#css#accessibility

How do you make an SVG icon accessible and stylable with CSS?

Open
2
HTML/CSSAdvanced#css#responsive

What is the difference between em/rem and viewport-relative clamp() for fluid typography?

Open
3
HTML/CSSAdvanced#css#responsive

What are container queries and how do they differ from media queries?

Open