Bifalgorithm post

If you're a front-end developer, I'm sure at least once you've put an outline none on your buttons or other elements because you don't want that default outline on them. Probably because you've come up with some other type of thing instead. I'm hoping at least. So if a user is keyboard navigating, it's still very clear what is happening. But I'm going to tell you not to do this and that there's a better solution. And that's because if a user uses a high contrast mode on their operating system, all of a sudden that fancy hover and focus effect that you've put on your elements is completely gone and just doesn't do anything at all. The solution is instead of using an outline of none, is to instead use an outline color of transparent. This will have the same effect on your regular sites, but then if somebody is using a high contrast mode, that transparent outline will now become visible and you've improved the user experience for some of your users with a very small tweak to your CSS.

If you're a front-end developer, I'm sure at least once you've put an outline none on your buttons or other elements because you don't want that default outlin…

Ideas in this flowchart

  • Front-End Development Tip
  • Common Practice
  • Use 'outline: none'
  • Reason for Use
  • Avoid Default Outline
  • Custom Styling
  • Issue with High Contrast Mode
  • Hover and Focus Effects Invisible
  • Recommended Solution
  • Use 'outline-color: transparent'
  • Benefits
  • Improves User Experience
  • Visible in High Contrast Mode
Feed/

If you're a front-end developer, I'm sure at least once you've put an outline none on your buttons or other elements because you don't want that default outline on them. Probably because you've come up with some other type of thing instead. I'm hoping at least. So if a user is keyboard navigating, it's still very clear what is happening. But I'm going to tell you not to do this and that there's a better solution. And that's because if a user uses a high contrast mode on their operating system, all of a sudden that fancy hover and focus effect that you've put on your elements is completely gone and just doesn't do anything at all. The solution is instead of using an outline of none, is to instead use an outline color of transparent. This will have the same effect on your regular sites, but then if somebody is using a high contrast mode, that transparent outline will now become visible and you've improved the user experience for some of your users with a very small tweak to your CSS.

"If you're a front-end developer, I'm sure at least once you've"

👍
0
0 comments0 shares

Sign in to view and post comments.