Under web developers it’s still a common practice to disable the browser focus outline. Shamefully I need to admit that, before today, I also did this. But let’s stop this bad habit by providing a good solution that both designers and accessibility gurus can live with.

Text input field focus example

The problem

Disabling the focus outline will give a keyboard user a hard time knowing where on the page he actually is. So this practice is like saying to a segment of your visitors: we don’t care about you, spend your money and time somewhere else.

Another common pattern is using a low contrasting color for the outline, instead of the default blue color. You can hardly call this practice better than setting the outline to none.

Low contrast focus outline example

The point of this article: there is a solution so you don’t have to choose between accessibility but ugly outlines vs clean layout and no accessibility.

An accessible solution

What we can do is show the outlines by default. Once a user clicks with the mouse somewhere on the page, we inject CSS that disables the outline.

*:focus {
    outline: 0;
}

Once we receive a keyboard event we remove the above CSS block again, resulting in visible focus outlines while navigating with the keyboard.

It amazes me that almost all StackOverflow posts and articles regarding this topic suggest to disable the outline without mentioning this, clearly, better solution.

At Ambassify, while working on the accessibility of our ReactJS components, I created smart outline which is a implementation of this technique.

What do you think?

I’m curious what you think about this solution. I’m by no means an accessibility expert, so is it possible that I’m missing some edge cases that could potentially cause problems for some keyboard users?

References

Tip Jar

If you like this blog, leave a tip! Your tip will help provide the basic necessities which sustain this blog: coffee, beer and raincoats for surviving the pitiful Belgium climate.

Ethereum 0x4cB6A32e31F8bAAfF7B6bee79F0b8aa4968e24E1

Swarm for privacy nerds

Not cleaning up your WiFi connection history could potentially harm your privacy Continue reading

Automate desktop cleanup

Published on May 07, 2017