Why do we need that outlines anyway?
If you are a web developer or you have written CSS several times then you might be familiar with this ugly looking blue frame that defaces your design:
As soon as we see this kind of borders around our beautifully designed widgets we get annoyed and immediately write following magic lines in our editor:
* {
outline: none !important;
}Or something very close to this… And with !important we make sure that it never bothers us for the rest of our life :)
However, we never know that by doing this we may actually prevent some group of people from using our web application or even annoy some of them.
Why is that? Let me explain. It has something to do with Web Accessibility.
Web Accessibility is practice of making web sites and applications available for wide range of people or even everyone if possible.
As the most of things in our technological world web accessibility also has standards and guidelines called Web Content Accessibility Guidelines (WCAG) which is being developed by W3C and has a goal of creating single shared standard for web content accessibility to meet the needs of individuals , organizations and governments internationally.
WCAG provides twelve guidelines that are organized in 4 categories making up the acronym P.O.U.R. which stands for Perceivable, Operable, Understandable, Robust. To get a notion of each one very quickly I would recommend to look at this link.
What we are going to look at is 2.1 under the Operable category which says “Make all functionality available for keyboard”. Navigating a web page with a mouse is very easy but if you don’t have it you are going to have some trouble. Or perhaps, for some of us it’s just easy to navigate with just only keyboard. This point includes that all functional elements must have a clear focus state so that when user clicks Tab button he/she understands where in the site he/she is. Just like this:
So, the outlines that we were removing all the time were just to provide clear focus state for the functional elements on our app. With that users can easily navigate web page using just tab , enter and space and will clearly understand which part of the page they are.
Of course accessible rich web applications are not limited just keyboard navigation availability but for the topic of this post it is enough to know. However, I strongly recommend to look at the link that I provided above to get to know with all of those guidelines. That will help you to write better web application when you start your next project.
You will be able to answer questions like, are you using valid color contrast or the right font size? Are you providing understandable feedback when the user inputs invalid input? Does your HTML makes sense when you remove style sheets from the page? Can users with small devices or low network connectivity easily use your web site?
All those you’re going to answer for yourself but for now, just don’t remove outlines from elements :) Instead make them look beautiful.
References
