Skip to content.

Quick tip

Never remove CSS outlines

By: Guilherme Simões. Published: .

Removing outlines in CSS creates issues for people navigating the web with a keyboard.

Using the CSS rule :focus { outline: none; } to remove an outline on an object causes the link or control to be focusable, but removes any visible indication of focus for keyboard users. 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:

  1. Style the outline. Webkit browsers have a more prominent glow 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.
  2. Style the element itself. You can remove the outline as long as you style the focused element differently (using a combination of color, background-color, border or text-decoration: underline for example). When using this approach, avoid using color alone as the only visual means of determining focus, as colorblind people may not be able to distinguish the focus state from the inactive state.
  3. Remove outlines for mouse users only, if you truly must do so. Start without applying any outline: none rules. If a mouse event is detected apply those rules using JavaScript. Remove the rules again if keyboard interaction is detected. Here are 2 examples of accessible outline removal scripts:
    • outliner.js, a cross-lib implementation with event delegation, by Aireh Glazer
    • outline.js, a similar approach that uses mousedown instead of mouseover, by Lindsay Evans
    • What Input?, differently from the previous two, adds an attribute to your body allowing you to write CSS that will be enabled only if the user is using the keyboard to navigate.

Consider this third solution as a last resort. Some browser/screen reader combinations fire mouse events, which could cause outlines to disappear while using this method.

In conclusion, using outline: none without proper fallbacks makes your site significantly less accessible to any keyboard only user, not only those with reduced vision. Make sure to always give your interactive elements a visible indication of focus.

Further reading