Do not remove the outline from links and form controls

An addition to my post Don’t forget keyboard navigation is that you should never use the outline CSS property to remove the indicator that most browsers display when a focusable element receives keyboard focus.

I’ve seen quite a few tips on how to remove the focus indicator by using outline:none or outline:0. Please do not do this, unless you replace the outline with something else that makes it easy to see which element has keyboard focus. Removing the visual indicator of keyboard focus will give people who rely on keyboard navigation a really hard time navigating and using your site. If the outline indicator bothers you enough that you really want to get rid of it, at least consider removing the outline from links on :active only.

Another, even worse, way of removing the focus indicator is to use a JavaScript onfocus event to remove focus as soon as a link or other element receives focus, making it impossible to use the page without a mouse. Never, ever do this.

Further reading:

This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.

Posted on May 14, 2009 in Quick Tips, Usability, Accessibility