DEV Community

Cover image for Stop Removing Focus
Todd Libby
Todd Libby

Posted on

Stop Removing Focus

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

A red stop sign

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

Top comments (25)

Collapse
 
pcjmfranken profile image
Peter Franken • Edited

Quite surprised to see no mention of the :focus-visible pseudo class considering it's been around for so long!

For anyone not familiar: it allows for focus indicators to only appear on keyboard navigation (like on tab) and not on elements that gained focus through a mouse interaction. Best of both worlds.

MDN: developer.mozilla.org/en-US/docs/W...
CSS-Tricks: css-tricks.com/keyboard-only-focus...
Official polyfill (yup, IE11 support for you enterprise devs!): github.com/WICG/focus-visible

Collapse
 
colabottles profile image
Todd Libby

Oversight on my part. Thanks for adding this.

Collapse
 
turbotobias profile image
Tobias Goulden Schultz • Edited

Thank you, I'd also argue that outline is noisy UX unless it's tabbed to (edit: because everything is a button, increasingly)

Collapse
 
jayjeckel profile image
Jay Jeckel

This is what happens when you put artists in charge of web design instead of actual engineers. They forget the point is to make a functional website, not to make a pretty art exhibit.

Collapse
 
colabottles profile image
Todd Libby

I know a lot of devs who take it out also.

Collapse
 
jmau111 profile image
jmau111 🦄 • Edited

Hum, tough topic. It's sometimes hard to explain to customers. I often end up keeping the outline but changing the outline color (e.g., using the brand color or accent color), which is probably not the best way.

The best way would probably be not to change anything and let the browser focus.

Collapse
 
grahamthedev profile image
GrahamTheDev

Great article Todd! People underestimate how essential a focus indicator is until you ask them to tab through a page…then they get how frustrating it is when people remove outline and don’t replace it!

Collapse
 
hyperlinked profile image
hyperlinked

This just made me realize that while I do have focus on my key sites, there are so many selectable elements that it's usability is bad due to chaos. Recently a popular design pattern for content teasers is to render them as cards that are wrapped with an A link element so that the entire card is selectable and clickable.

I like that for accessibility reasons, but is it possible to make that entire card element selectable for those using focus indicators, but not for people clicking with a mouse? I want to retain the option of having clickable links within the teaser content that's not crucial to the experience so I'd want to sacrifice that option for access using readers.

Collapse
 
colabottles profile image
Todd Libby

I like these two resources. They are what you're looking for.

inclusive-components.design/cards/
nomensa.com/blog/how-build-accessi...

Collapse
 
nicm42 profile image
Nic

Yes! I completely agree with this. I'm a sighted user who sometimes uses the keyboard on a website and feels like there are more websites that have no focus states than focus states.

Given a choice between an 'ugly' focus state and none at all, I'll choose the 'ugly' one every time.

And at least Chrome's default focus state is pretty good - as much as I love Firefox, Firefox's default can sometimes be quite hard to see.

Collapse
 
cadonau profile image
Markus Cadonau

To be fair, Eric Meyer’s Reset CSS has not included outline for a while, presumably over ten years (“v2.0 | 20110126”).

Collapse
 
colabottles profile image
Todd Libby

Correct. I hadn't looked at the code for quite some time and should have added that in. Thanks.

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

I am learning the a11y in depth, and I must admit that it is not practical to remove the outlines for some people who have difficulty navigating. 😵

Collapse
 
alanbosco profile image
Alan Bosco

What to do when the client insists so. We are getting bug titckets on this lol.

Collapse
 
colabottles profile image
Todd Libby

Insist that they don't get rid of it and tell them the reasons why. People with visual issues need that focus indicator. Have them to the "squint test". Squint and use the keyboard only to try and navigate around the site. Can they do it? Probably not. If they're not open to it, then tell them about the lawsuit that can happen if they don't. I have done exactly this with great results. Clients that are good/great clients will understand.

Collapse
 
sfleroy profile image
Leroy

Thats easy to say but you can't really complain about something unless you have a suggestion. Why not come up with at least something that works and doesn't look like it came from the 90s. Any suggestions?

Collapse
 
ryan profile image
Ryan

Sure, write your own focus style with CSS. We don't complain that browsers use an ugly font by default, we write CSS to apply a nicer one. There is no reason this shouldn't extend to accessibility features too. Look at this very site for examples.

Collapse
 
colabottles profile image
Todd Libby

"Thats easy to say but you can't really complain about something unless you have a suggestion."

Accessibility is a right. NOT a privilege. So there's an answer to your question that's simple and accessible and inclusive...

Style your focus indicators. It's been a thing for a long time now. I think that was made clear when I wrote;

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

or

"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!"

So I'll keep "complaining" about themes like Divi for WordPress that strip the focus indicator out of the theme, or designers that want to get rid of it for "aesthetics" sake, or "it looks ugly.", "Just use the default, that's good enough.", or "Why not come up with at least something that works and doesn't look like it came from the 90s."

Style your focus indicators. It's 2022 You can do a lot with CSS now. Stop removing focus.

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Yes…my suggestion is to…remove outline! 🤣

But hear me out, if you are careful box-shadow is far better as a focus indicator as you can add curves to corners and even animate it!

Now sadly you can’t just do it without thought, there are a few hoops you need to jump through to fall back gracefully for older browser and account for high contrast mode etc, but it is a viable way to make focus indicators beautiful!

Yet again, :focus-visible requires some careful thought for fall back as support is good but not 100%, but :focus-visible is also the modern way to do focus indicators so they don’t appear accidentally when you tap on mobile etc.

Above all, remember this: even if something looks like it is ugly, if it improves accessibility then it also improves usability, and end users are more bothered about usability and actually being able to complete an action than aesthetics if you HAVE to make a choice! ❤️

Collapse
 
garybyrne profile image
Gary Byrne

"box-shadow is a versatile property which web developers can use to achieve various different glow and nested border effects. However, this property is reverted in forced color modes. If you use box-shadow to denote state this state information will be lost in forced color modes unless you plan accordingly." -blogs.windows.com/msedgedev/2020/0...

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Hence why the “few hoops”, this certainly isn’t a full tutorial, however the trick is that you set a transparent outline and a couple of media queries so that when the box shadow is deactivated by high contrast (for example) a standard outline is show. Maybe I should do a full article at some point.

Thanks for sharing, I really should have made that more clear that you can’t just rely on shadows!

Collapse
 
martinwheeler profile image
Martin Wheeler

Agreed, we should be mindful to add some sort of consistent outline/style when using the CSS resets.

Collapse
 
diballesteros profile image
Diego (Relatable Code)

Completely agreed. Sometimes to make things a little better looking (subjectively) we misguidedly opt to remove useability and accessibility.

Collapse
 
afheisleycook profile image
technoshy

Another solution to this is making sure tab index is correct

Collapse
 
colabottles profile image
Todd Libby

Tabindex hasn't anything to do with removing focus in the stylesheet. Those are two entirely separate things.