Nearly three years ago we published a blog entry titled The plague of outline:0. At the time, it was becoming increasingly common for web sites to disable the focus indicators for links via CSS, thus making it nearly impossible for sighted keyboard users to determine which link currently has keyboard focus. Unfortunately, in recent years, this trend has continued with many popular web sites removing the focus indicator, including Twitter, LinkedIn, Flickr, AOL, CNN, MySpace, ESPN, etc. Visit these pages and (assuming you have vision), try to navigate via the keyboard to see how entirely inaccessible this renders these web sites.
As noted in the original article, many of these sites use a CSS reset file that removes the focus indicator. One of the most popular of these reset files is Eric Meyer’s reset.css. In a recent update to reset.css, Eric has now commented out the line that removes focus indicators, thus requiring author intervention to re-enable it. UPDATE: Today Eric posted some thoughts about how best to address this.
A few months ago, the code at HTML5 Reset was launched without focus indicators. This was called to their attention on Twitter and within a few hours they had reintroduced keyboard focus indicators by default.
The recently launched OutlineNone.com web site draws attention to the distinct accessibility issues of removing focus indicators. Roger Johansson, among others, has also wrote on this topic – Do not remove the outline from links and form controls.
WebAIM applauds all of these efforts. Combined, perhaps they will change the course of this phenomena. They certainly have raised awareness of this significant, yet easily removed and even more easily avoided accessibility issue.
I’ve mused further on this topic in “Looking for Focus“, and I’d very much appreciate input from WebAIM readers and contributors.
Thanks for bringing attention to this. Before I turned my focus to implementing accessibility into my apps I thought that the focus indicator was just annoying and impacted the look of the site in a negative way. I’m sure that’s why many sites try to eliminate it. But it makes perfect sense why it exists once you start thinking about it in terms of users who can benefit from it.
I think the best is not to remove the outline property, but there are some ways to hide outline for click and show it when links have focus -> Better CSS outline suppression
I prefer to replace the default outline method with something more obvious, such as a background colour. This is because whenever I try tabbing, I find the outlines a bit difficult to spot without paying complete attention, so I can imagine that anyone with less than perfect eyesight would struggle with them. I’m all for making everything as clear as reasonably possible.
Ade-
Enhancing the focus indicator is always a good idea. Do keep in mind that replacing the default focus indicator (outline) with something else could result in no focus indicator at all for users that override page colors due to vision impairment.
Yes, I can certainly appreciate your point there, although I wonder how many users would disable all page colours (and what method they might use, other than just disabling all CSS) given that it would in many cases make usability worse rather than better (e.g. deterioration of contrast). But in any case, I always include a 2px border the same colour as the background, so it should still be more visible than an outline.
A bit late to the party but a there’s a couple of things I’d like to mention.
First, thank you for mentioning my outlinenone.com site which, admittedly, I threw together after visiting yet another site I had problems navigating and using.
Secondly, it must be remembered that the outline on :active links (or suitable alternative) is also very useful to an ageing person like me, being colourblind, with steadily declining eyesight, and a less than perfect mouse finger! Basically it’s nice to have a link indicate that I have already clicked it while I wait for the linked page to load. When a page is slow to reposnd it saves repeatedly clicking the thing and prevents frustration. Unfortunately some web browsers, notably of the Webkit variety, seem to have stripped this facility out of their default setup, unlike Firefox and IE.
Less designer vanity and more accessibility please!