(Description) Removing CSS outlines without proper fallbacks can make it impossible to navigate your site with a keyboard.
Use of the rule :focus { outline: none; } results in the link or control being focusable but with no visible indication of focus for keyboard users. Even worse, methods to remove it such as onfocus="blur()" result in keyboard users being unable to interact with the link or control.
If you do not like the default focus outline that is displayed when a user clicks on an interactive element, you have 3 accessible solutions:
- Style the outline. Webkit browsers have a more prominent outline so you could try styling it to make it less obtrusive. Consider the use of
a:focus { outline: thin dotted; }to normalize the look of the outline across browsers.