Why the ‘outline’ CSS property is so important

There are a lot of designers and developers who (for whatever reason) choose to remove any styling from the outline property that highlights focused anchors. This is a short post about why you shouldn’t do it, or if you really need to; how you can make it look a little better than browser default outlines.

In short, removing any style to focus’d elements is really bad when it comes to the accessibility of your pages. People who can’t use conventional methods of navigating pages (like a mouse) are prone to using the tab key navigate links on a page, removing the main method of determining which link that currently has focus is therefore obviously not a good idea.

If we look at the Web Content Accessibility Guidelines (as published by W3C) we can see that it includes a relevant passage about the focus property:

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

Now, there are a lot of people who respond to being told this with a resounding: ‘BUT IT LOOKS SO BAAD!’. The truth is, in it’s default state in most browsers they’re right. But that doesn’t mean we can’t style it ourselves with some simple CSS.

If you take a look at demo, you can see a couple of different methods of using the :focus property to help the accessibility of your pages without a detrimental effect on your design.