Skip to main content Accessibility Feedback

Just use :focus styles, damnit

This post has also been translated into Russian.

Recently, there’s been a handful of articles and recommendations from people about how to use :focus-visible to show :focus styles when someone is using a keyboard but ignore them when the user interacts with a mouse.

The best one I’ve seen so far comes from Lea Verou:

I’m 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’t support :focus-visible.

The general sentiment is always the same: focus rings (those outlines around links and buttons and other focusable elements) suck, and we only include them because keyboard users need them.

Bullshit.

Focus styles are actually awesome. My friend Eric Bailey has a great presentation on this.

I personally enjoy them for the same reason that I also actually like :visited styles on link-heavy pages.

Even as a mouse user, knowing what currently has focus is useful, because I do sometimes also use my keyboard, often interchangeably with using a mouse. I may be an edge case, but do you know how every single one of your users navigates your sites and apps?

We keep making the same mistake—assuming we know how our users want to use what we build or that they’re just like us—over-and-over again.

Also, focus styles don’t have to be ugly. I think the defaults are great, but you can do all sorts of creative things to make them look nicer different.

My point: just include focus styles on your site. For everything focusable. For everyone.