Showing Keyboard Focus with :focus-visible

In this lesson you'll learn how to show keyboard focus with :focus-visible, so you can build an accessibility-conscious design. This is for people searching "CSS focus-visible usage."

:focus-visible is a pseudo-class that only shows a prominent outline when an element is selected using the keyboard's Tab key. It doesn't show it on a mouse click, so you can preserve the visual design while still accommodating people using the keyboard.

The sample code specifies a purple outline on button:focus-visible. Try comparing the difference in how the outline is shown between clicking with the mouse and selecting with the Tab key.

A common beginner stumbling block is the difference between :focus and :focus-visible. :focus always fires, even with a mouse click, but :focus-visible is a newer, smarter pseudo-class that only fires when the browser judges it to be keyboard interaction.

For someone operating a site entirely with a keyboard, no mouse, being able to see "where am I currently selected" through a focus outline is essential. This is a relatively new, handy pseudo-class that lets you achieve both visual design and accessibility at once.