Skip to Main ContentSkip to Footer

Accessibility: Never Remove the Outlines

October 08, 2019

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.

0  2s  SX  dq0mQdqQaZ

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 isn’t good This isn’t good

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.

Without the outlines, you won’t see what are you currently focused on.

You can try this by unplugging your mouse for five minutes and surfing the web just with the keyboard using the tab key.

In this example, I’m focused on the image link of the car: https://codepen.io/Giorat/full/YzKMdEW.

On the left, I removed every outline using the “tips” from Stack Overflow.

On the right, there’s the accessible one — you can clearly see the outline.

1 kWK2K3WG85kMVUvXSbx7bg 1 bHXia5C4WeicdRv  6 fmA

I Want to Remove the Outline in an Accessible Way

It’s easier than you imagine — just add this JavaScript code:

With this code, you’ll remove the outline if you use the mouse, and if you use the keyboard, you’ll enable back all the outlines.

With this simple code, we make both users really happy. People using a mouse won’t see a blue outline when they click a link, and people who use a keyboard will clearly see a nice outline.

Thanks to the unfocus repository.

Medium Has This Accessibility Problem Too

Medium curators: You should tell your developers to consider accessibility.

You’ll find ithard to understand where you’re currently focused on here. Outlines aren’t always clearly visible, and there are multiple occurrences of outlines hidden from various elements in your CSS files:

.button:active,.button:focus {  
    outline: 0;  
    color: rgba(0,0,0,.84)  
}

I found out other accessibility problems here on Medium that I’ll discuss in future articles.

No one is perfect, but we can all try to improve helping each other — trying to be more empathetic to other types of users with old devices or with different possibilities.

I think that web accessibility is important, and we can improve it with small tips or changes to our daily work as web developers.

Test your website for accessibility issues!

There are many custom product to do so like TheUserIsBlind that will provide you a real human test valuation of your website to discover real problems that automatic tools won’t find or discover cause you simply need a human!

Resources and References


Subscribe to my email list!

If you enjoy my work, you should definitely join my newsletter"Giorat Mails". It’s one email a week with everything interesting I’ve read or found, plus new articles and fresh tutorials.

Sign up for our newsletter