Accessibility: Never Remove the Outlines

You’re going to break web accessibility

What’s a Web Outline?

The outline is the light blue border you see around the element you are focused on within your browser. To see it clearly, you can press the tab key multiple times to understand which element are you currently focused on.

I don’t want to see the outline — it’s not cool

You usually don’t say, “I don’t want to see the railing on these stairs.”
You don’t say, “I don’t want to see the braille writings on this panel.”
You don’t say, “I hate this ramp for people with a wheelchair.”

Why should I care about accessibility?

Removing the outlines is really bad for accessibility (or A11Y).
Accessibility affects everyone, even if the common belief is that it’s just for blind people. In reality, everyone is affected — like the people in this figure.

Stack Overflow is Terribly Wrong

If you say that removing the outline is common, you’re right, but it’s just bad behavior that I once followed too.

Here’s one of the bad Stack Overflow answers.

This snippet is the worst thing you could add to your CSS classes — outline set to none or 0 removes it entirely.

Having to work to make websites accessible made me realize the problems we’re making with these changes, and fixing this problem is simpler than the problem.

Do We Really Need the Outlines?

Yes, you can remove them, but you should understand one thing first:
You should never remove the outline for users using a keyboard to surf the page. People that only use the keyboard need to understand where they are focused; with the mouse or touch you won’t have this problem.