Increasing UI Control Focus Visibility for Keyboard and Mobile Users with CSS :focus outline:

Never use CSS :focus {outline:none;}! This will remove the visible focus outline.

You should enhance the focus with CSS! e.g. *:focus{outline:3px solid blue; outline-offset:2px;} It is a best practice to enhance the focus outline, but at a minimum never disable the browsers default outline!

The browser default focus outline indicators are very difficult to see and sometimes impossible to see if their background is the same color as the outline.

I recommend avoiding default focus outlines! USE CSS FOR GOOD!

Use the Force Show Focus bookmarklet to help determine your location on the page while testing accessibility on sites that have incorrectly removed the visible focus outline.