{"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 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: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