A11y tips: don't remove focus indicator

Very often we use outline: 0 to remove the effect of focusing on an element. This, which initially prevents a border from wrapping around it when you click/touch on it, means that users navigating using the keyboard don't have a visual indicator of which element has focus. And we know that every interactive element needs a focus indicator.

Therefore, it is recommended to address this problem using some of these solutions:

1. Style outline property

Use CSS to give the outline the effect you want, for example:

button:focus {
  outline: 4px dashed black;
}

2. Style element itself

Remove the outline but design other styles for the focused element, using the CSS properties that suit you best: border, background-color, text-decoration, color... In case you choose this option, it is important to be careful not to use the color as the only element to provide information about the focus, since there may be colorblind people who are not able to distinguish between the normal state and the focus state.

button:focus {
  outline: none;
  /* any accessible style you want here */
}

3. Remove outline for mouse users only

Since the problem occurs when mouse users click/touch on an interactive element, it seems best to remove the outline for these users only. Luckily we have a well-supported CSS pseudo-class at our disposal that allows us to do something like this: :focus-within.

With good browser support we can now do something like what Lea Vérou proposes.

button:focus:not(:focus-visible) {
  outline:none;
}

This way we only remove the outline for users clicking/touching the element, and we can complete our styles using the same pseudo-class for keyboard navigation:

button:focus-visible {
  outline: 4px dashed black;
}

There are very good articles on this subject by Chris Coyier and Patrick H. Lauke.