Do not remove OUTLINE from your CSS!

November 10, 2019

As you might already know, I am in the midst of completing my JS30 challenge with Wes Bos. You can read more about my journey in 30 days of JavaScript - Part 1 of 3

Whilst completing Day 11 (it will be covered in Part 2 of this series) to create my custom video player, I noticed in Wes’s CSS the styling for “player__button” and focused input:

outline: 0;   
outline: none;

I am a big fan of Wes, so I tried to understand why he decided to get rid of the outline property from these elements. I have even written to him to ask about his opinion, and I will be sure to let you know what he says.

However, seeing this prompted me to write this post about the topic that is very dear to my heart as a web developer; accessibility (a11y)

Let’s start with what it means, as per MDN’s definition:

Accessibility is the practice of making your websites usable by as many people as possible. We traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections.

You may ask about what the outline does in the first place. It is used to define a border around elements that is not visible unless you click/focus on it.

With all that in mind, let’s get back to our outline property, or rather why some people choose to remove it.

I believe some designers and people annoyed by the default look the browsers give to the outline elements, decide it is best to get rid of it altogether.

The browsers create this automatic focussed border by default, as a way of providing visual feedback. It is very important for accessibility (a11y) reasons, for the people who, for example, use the keyboard to navigate through our sites due to visual impairment. In the Web Content Accessibility Guidelines, you will find a point about this subject too:

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

For example, on this page you might have noticed the mode-switcher in the upper right hand side corner. If you click on it, you will notice the blue border around this element (or dotted border, depending on the browser you use).

outline focused

If you do not use the mouse or the pad, but instead navigate my site with TAB, you should notice you can get to this element with TAB too.

You might say that you really do not like they way the default browser outline looks, fair enough. You are free to provide the alternatives to the outline’s style, but do not get rid of it completely.

To sum up, do not remove the outline property, let the browser handle the visible focus for active elements!

If you are interested in the topic of accessibility, do read further about its best practices.

And if you would like to know more about the outline property itself, CSS tricks always has a great explanation too.

Thanks for reading, and now I am back to that video challenge of Day 11 with JS30 💁