Skip to content

Instantly share code, notes, and snippets.

@guilhermesimoes
Last active December 11, 2015 11:48
Show Gist options
  • Save guilhermesimoes/4595862 to your computer and use it in GitHub Desktop.
Save guilhermesimoes/4595862 to your computer and use it in GitHub Desktop.
Never remove CSS outlines

Quick Tip: Never remove CSS outlines

(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:

  1. 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.

  2. Style the element itself. You can remove the outline as long as you style the focused element differently (using color, background-color, border or text-decoration: underline for example).

  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

    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.

@davatron5000
Copy link

I like where this is going! One small thing:

  • Chrome's orange outline => For me the focus state is always a blue glow. Which makes me think this is somewhat system level related or differs by vendor/OS. Maybe consider being more browser agnostic (don't want to pick on Chrome) and say "Webkit's glow"... or something.

@guilhermesimoes
Copy link
Author

Oh, right, Mac users ehe 😀

I considered using Webkit's more prominent outline because to me it also sounded like I was picking on Chrome but I wasn't sure if Safari was also like that.

@davatron5000
Copy link

Good good!

  • I think you could keep "glow" in there if you wanted, only because designers seem viscerally opposed to "the glow"
  • Should point no.1 be titled "Normalize the outline"?

@guilhermesimoes
Copy link
Author

  • Ok, I agree.
  • I don't think so. My point was: if you don't like the glow or if it clashes with the look of your website, you can style it however you want. I then proceed to suggest the use of outline: thin dotted since it is a bit more discreet and generally designers use Chrome or Safari, so they might remove the glow without even seeing that it does not look that bad in other browsers (where outline: thin dotted is the default).

Maybe I should add that you can style the outline with a rule like outline: ridge 1px red since that part is not that clear. And provide a link to Mozilla's CSS docs about outlines.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment