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:
- 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.
- Previous post: Don’t forget keyboard navigation
- Next post: Line wrapping text in legend elements