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
- Users with visual issues will not see where they are on a Web page when using the keyboard as a means of navigating.
- Sighted users (like myself) will also use the keyboard to tab through interactive items also.
- Many blind and visually impaired people use keyboard interactions in order with their screen readers.
- When an element receives focus it means that element is ready for interaction. You're removing the ability to interact visually with that element.
- 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 (26)
Quite surprised to see no mention of the
:focus-visiblepseudo 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
Oversight on my part. Thanks for adding this.
It's not really the best of both worlds. Even MDN warns of the confusing rules that
focus-visiblefollows. 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).
Thank you, I'd also argue that outline is noisy UX unless it's tabbed to (edit: because everything is a button, increasingly)
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.
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.
I know a lot of devs who take it out also.
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.
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!
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.
I like these two resources. They are what you're looking for.
inclusive-components.design/cards/
nomensa.com/blog/how-build-accessi...
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.
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.
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. 😵
To be fair, Eric Meyer’s Reset CSS has not included
outlinefor a while, presumably over ten years (“v2.0 | 20110126”).Correct. I hadn't looked at the code for quite some time and should have added that in. Thanks.
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?
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.
"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.
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-visiblerequires some careful thought for fall back as support is good but not 100%, but:focus-visibleis 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! ❤️
"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...
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!