There is nothing that bothers me more than visiting a website and seeing that the CSS pseudo class :focus has been set to outline: none; The :focus element is so important for web accessibility since it assists keyboard only users to be able to tab through content and selectable elements. The following elements have the :focus state by default: a, button, input, and textareas but you can actually give any HTML element a focus state. When you remove the focus state you’re overwriting a built-in accessibility feature and there is no reason for it. The :focus element, is a CSS class, therefore you can use CSS to style it to fit into any design. It doesn’t have to be the built in browser outline, it can be whatever you’d like.
Here’s a few ideas of how you could style the :focus element:
(I love that palegoldenrod is a CSS color).
Here is an example of tabbing through a site that has removed focus. Look very closely. The only way you can see what element you’re on is in the very bottom left hand corner. It creates a really frustrating experience for anyone who doesn’t use a mouse to browse the web.
Below is another example of a website that uses focus the right way. Watch me tab through the elements with ease and know exactly where I am on the page and where those links are going to take me.
Such a small design element can be a huge difference in making your site usable to a large demographic of users who don’t use a mouse. Keep this in mind when your designing your websites.