DEV Community

Cover image for Stop Removing Focus

Stop Removing Focus

Todd Libby on April 27, 2022

You know that border around interactive items on a Web page? Links, form components (checkboxes, buttons, text fields), tags, pagination. That bord...
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
 
lemon_bob profile image
Michael L • Edited

It's not really the best of both worlds. Even MDN warns of the confusing rules that focus-visible follows. It's not quite as simple as keyboard yes, mouse no. Chrome and Firefox have different rules, take input type select for example. User agent heuristics are not currently supported by any browser - which is what focus-visible was supposed to deliver.

I would recommend not using focus-visible currently. Nothing is clearer than always showing focus styles. Good UX is about usability, not prettiness (although I would argue a focus ring styled well adds aesthetics).

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
 
lemon_bob profile image
Michael L • Edited

Many accessibility patterns - toolbars, grids, menu lists (to name a few) require arrow key focus, not tab, which can only be accomplished programmatically.

Chrome adds the focus-visible styling on any key press, not just tab. Firefox uses unstable timing functions to determine programmatic focus-visible styles.

focus-visible therefore results in an almost disco like light show of the ring flashing into view then disappearing, which is why MDN cautions against using it due to confusing behaviour - the antithesis of good UX.

A focus indicator doesn't have to be an outline. Good UX is about giving the user all the available information in their preferred way.

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
 
spo0q profile image
spO0q 🐒🎃 • 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
 
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
 
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

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

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