{"id":323313,"date":"2020-10-16T12:12:54","date_gmt":"2020-10-16T19:12:54","guid":{"rendered":"https:\/\/css-tricks.com\/?p=323313"},"modified":"2020-10-16T12:12:56","modified_gmt":"2020-10-16T19:12:56","slug":"the-focus-visible-trick","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-focus-visible-trick\/","title":{"rendered":"The :focus-visible Trick"},"content":{"rendered":"\n

Always worth repeating: all interactive elements should have a focus style. That way, a keyboard user can tell when they have moved focus to that element. <\/p>\n\n\n\n

But if you use :focus<\/code> alone for this, it has a side effect that a lot of people don’t like. It means that when you click (with a mouse) on an interactive element, you’ll see the focus style. Arguably, you don’t need that feedback as a mouse user, because you just moved your cursor there and clicked. Whatever you think of that, it’s annoyed so many people over the years that they remove focus styles entirely, which is a gnarly net loss for accessibility on the web.<\/p>\n\n\n\n\n\n\n\n

What if we could apply focus styles only when the keyboard is used to focus something, not the mouse? Lea Verou put a finger on this a few years back:<\/p>\n\n\n\n

\n

I\u2019m gonna start blanket adding the following rule to all my stylesheets:

:focus:not(:focus-visible) { outline: none }

Gets rid of the annoying outline for mouse users but preserves it for keyboard users, and is ignored by browsers that don\u2019t support :focus-visible.<\/p>— Lea Verou (@LeaVerou) September 28, 2018<\/a><\/blockquote>