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

Discussion (24)

Collapse
pcjmfranken profile image
Peter Franken • Edited on

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 Author

Oversight on my part. Thanks for adding this.

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 Author

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

Collapse
jmau111 profile image
jmau111 • Edited on

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 Author

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
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
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 Author

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

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 Author

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
capz 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
colabottles profile image
Todd Libby Author

"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
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
grahamthedev profile image
GrahamTheDev • Edited on

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
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
martinwheeler profile image
Martin Wheeler

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

Collapse
afheisleycook profile image
Aheisleycook

Another solution to this is making sure tab index is correct

Collapse
colabottles profile image
Todd Libby Author

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