You know that border around interactive items on a Web page? Links, form components (checkboxes, buttons, text fields), tags, pagination. That border that differs in the browsers you use and test in. The "ugly" outline that designers hate?

I've been seeing a lot of focus indicators being stripped or removed from sites with no forethought on the impact it will have on accessibility lately. We need to stop doing this because it is harmful and I'll tell you why.

Why It's Bad

Whether it's :focus{ outline: none; } or the one that really makes an accessibility person's blood pressure rise, * { outline: 0; } the continued omittance of focus styles and indicators is bad for accessibility. Period.

Reasons to Stop Removing Focus

Photo by Joshua Hoehne on Unsplash

1. Users with visual issues will not see where they are on a Web page when using the keyboard as a means of navigating.
2. Sighted users (like myself) will also use the keyboard to tab through interactive items also.
3. Many blind and visually impaired people use keyboard interactions in order with their screen readers.
4. When an element receives focus it means that element is ready for interaction. You're removing the ability to interact visually with that element.
5. Visual indicators help people with executive dysfunction and other visual or processing related issues (light sensitivity, migraines, etc.) because it draws attention to one thing at a time which helps helps reduce cognitive load.

You're creating a barrier rather than removing one.

CSS Resets

The inclusion of outline:0 in many CSS reset files, such as Eric Meyer’s CSS Reset. It applies outline:0 to all page elements. Eric clearly indicates that focus styles should be re-implemented;

 remember to define focus styles! */
:focus {
outline: 0;
} 

Don't forget to add the focus style back in and make it visible with a high contrast (at least 10:1).

Browser Defaults

Default outlines in most cases are not good enough if the user cannot see the outline due to age, degenerating eyesight, glaucoma, astigmatism, other macular/visual degeneration.

Again, make them visible!

Repeat After Me...

Don't remove focus indicators!

Header image photo by Stefan Cosma on Unsplash