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.
Continue reading Focusing on :focus