Thread by @JoshWComeau

The most infamous CSS rule is:

button:focus {
outline: none;
}

This style removes the "ugly" focus ring on inputs and links, but it means keyboard users can't navigate; it totally breaks the experience for them (and any non-mouse users) 😬

A thread with some solutions 🧵

First, some quick options:

• Leave them as-is! Outlines aren't so bad.
• Provide an alternative focus style, like changing the background color, or adding a border.

There's a nifty new pseudo-class you may not be aware of, though…

🌠 The `:focus-visible` pseudo-class is just like the `:focus` one, but it only matches when the browser determines that a visible focus state is necessary (eg. not a mouse user).

Keyboard users will see the focus rings, but mouse users won't.

In terms of browser support: It's missing IE and Safari, but you can fix this with a polyfill!

Repo: github.com/WICG/focus-vis…
NPM: npmjs.com/package/focus-…

I've heard that this solution isn't perfect — there are certain mouse-users who still benefit from the focus indicator — but it strikes me as a pretty good solution, especially for folks who are having a hard time convincing their design team to keep the focus outlines!

This is one of those nice areas where we don't actually have to do much work to make things accessible — the browser already does this for us, built-in!

It's on us to preserve that behaviour, though! One way or another.

More info: outlinenone.com