Never remove CSS outlines

gistfile1.md

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.

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.

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.

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"?

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