CSS box-shadow vs outline

Question

I have not been able to find a duplicate and you can find a bunch of blog posts which suggest to use box-shadow for element's focus state instead of outline as it is more flexible in terms of styling and it also follows the border-radius of the element you are styling unlike outline which always stays rectangular.

Is it considered a good practice to replace outline with box-shadow? Are there any caveats of doing so?

Bernadettebernadina

As long as it properly conveys to the user which element currently has the focus, it doesn’t really matter what you do. It doesn’t even have to be one of those two – countless other CSS properties could help achieve that in different ways (color, background, etc. pp.), so what exactly you choose is up to you. The only thing you should take into account is whether whatever effect you go for is “strong” enough (regarding notice-ability contrast etc.), even for users that might have cognitive impairments. Less of a programming, and more of a UI/UX question. – Penitent

thank you. The reason I specifically only mentioned these two above is that perhaps some developers had a UX testing in which they found out that users response better to outline or if there are some other technical limitations which I am not aware about, that it the purpose with which I created the question – Bernadettebernadina

Even then it would depend very much on the specifics - a box shadow of 10px width might work better than an outline of 1px width, or vice versa … It really all comes down to how noticeable the effect is for the user - can they clearly identify the element currently having the focus, based on the formatting you apply to it in that state? That is the important question, not what specific properties you use to achieve it. – Penitent

Your question seems to assume that outline is the go-to property for showing the the focus state, but it never was the only property used for that. How about text-decoration and color for links? Or background-color for buttons? – Doubleteam

You should also post on ux.stackexchange.com. Lots of good design advice there. – Warehouseman

@MrLister I do not assume that, it is used by default for buttons/inputs by any browser. My question was targeted towards whether it is a good practice to replace outline with box-shadow or not. That's about it. – Bernadettebernadina

Answer 1

Is it considered a good practice to replace outline with box-shadow? Are there any caveats of doing so?

The WCAG has a specific failure for that:

F78: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

Note that users may want to customize their own outline indicator for their own particularity (better contrast, specific color, size, ...). So by removing it and replacing it with box-shadow, you won't let their own settings take precedence over yours, or may interfere with them.

Other styling may make it difficult to see the focus indicator even though it is present, such as outlines that look the same as the focus outline, or thick borders that are the same color as the focus indicator so it cannot be seen against them.

Cohleen

Removing the default outline doesn't automatically lead to failure F78, it just applies if the author hasn't provided an effective focus indicator to replace it. From F78 (emphasis mine): "This describes a failure condition that occurs when the user agent's default visual indication of keyboard focus is turned off or rendered non-visible by other styling on the page without providing an author-supplied visual focus indicator." However box-shadow won't work in Windows high-contrast themes, so F78 is relevant here. – Pye

Also, removing the default outline doesn't prevent a user from customizing the focus styles themself. User stylesheets trump author stylesheets, and several browser add-ons also provide a way for users to restore missing focus indicators. – Pye

Answer 2

There is a serious caveat to using box-shadow as a focus indicator. It doesn't work in Windows high-contrast themes.

When a Windows high-contrast theme is turned on, web browsers which support it will override certain CSS properties. Firefox, IE, and Edge do this, but Chromium-based browsers don't (as yet).

• Foreground colours are overridden, to match the Windows theme. This applies to text, borders, and outlines.
  • Note that the CSS transparent keyword is a colour value, and it is also overridden here. A transparent border becomes visible.
• Background colours are overridden, to match the Windows theme.
• Background images are removed (including CSS gradients) in IE and Firefox.
  • Edge preserves background images, but applies a solid background colour to text. So parts of the background image may not be seen.
• box-shadow is not applied, so it won't work as a focus indicator.

The following focus style will NOT be seen when a Windows high-contrast theme is in effect:

a:focus {
  box-shadow: 0px 0px 5px 5px rgba(0,0,255,1);
  outline: none;
}

There is an approach which can work however. Instead of removing the outline entirely, make it transparent while leaving the outline style and width in place. When a Windows high-contrast theme is in effect, box-shadows won't appear, but the outline will appear because the transparent colour is overridden.

a:focus {

  /* Visible in the full-colour space */
  box-shadow: 0px 0px 5px 5px rgba(0,0,255,1);

  /* Visible in Windows high-contrast themes */
  outline-color: transparent;
  outline-width: 2px;
  outline-style: dotted;
}

Pye