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.

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:

• The plague of outline:0
• WCAG 2.0 2.4.7 Focus Visible
• WCAG 2.0, F55: Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received
• WCAG 2.0, F78: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

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 Accessibility, Quick Tips, Usability

• Previous post: Don’t forget keyboard navigation
• Next post: Line wrapping text in legend elements

Comments are disabled for this post, but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.

Sponsors