Does replacing a form input's outline with box-shadow violate any WCAG guidelines?

Question

Question

What accessibility downsides are there to set outline to none and instead use box-shadow to highlight an active input? Does it violate WCAG at all?

Background

User agent style sheets highlight an active element's outline on focus. To customize this highlighting we can use the :focus selector. This works well for rectangular shaped input elements, but doesn't look good on rounded inputs. A mismatching square is displayed. See below example where the red outline is square even though the input has rounded corners.

As outline is rectangular, to better match a rounded element, an alternative way to style is to replace outline with box-shadow. This require setting outline: none, which seems controversial from an accessibility perspective.

Example

input {
  border-radius: 999em;
  padding: 10px;
}

.outline:focus {
  outline: solid 15px red;
}

.box-shadow:focus {
  outline: none;
  box-shadow: 0 0 0 15px red;
}

<label for="with-outline">Outline</label>
<input name="with-outline" id="with-outline" class="outline">
<hr>
<label for="with-box-shadow">Box Shadow</label>
<input name="with-box-shadow" id="with-box-shadow" class="box-shadow">

Answer 1

Short Answer

No issues with using box-shadow or outline if you don't need to support IE8. There are a few considerations such as colour contrast but technically your current example passes current guidance (although I would encourage you to increase the colour contrast slightly).

Longer Answer

The main thing you need to consider is colour contrast. As long as the border is a 3:1 contrast ratio with the background then under current guidance you are OK.

However WCAG 2.2 comes into effect from June / July 2021 so you may as well prepare for that.

WCAG 2.2

As long as you have sufficient contrast and it is thick enough to comply with WCAG 2.2 (so you don't have to redo stuff when that comes into effect) you will be fine. The following is a summary of the upcoming rule changes (which the example you gave passes):

Change of contrast: The colour change for the focus indication area has a contrast ratio of at least 3:1 with the colours of the unfocused state.

The following is IN ADDITION to the above:

Contrast or thickness: The focus indication area has a 3:1 contrast ratio against all adjacent colours for the minimum area or greater, or has a thickness of at least 2 CSS pixels.

The focus needs a minimum 3:1 change and also needs to be:

• either 2px thick and/or
• 3:1 against ALL adjacent colors.

For WCAG 2.2 the following rules apply:

• Minimum area: The focus indicator area is either:
  • at least as large as the area of a 1 CSS pixel thick perimeter of the unfocused component;
  • at least as large as a 4 CSS pixels border along the shortest side of the unfocused component, and no thinner than 2 CSS pixels.

Obviously WCAG 2.2 is just a draft but I think the principles are pretty close to final for borders and focus indicators.

You can see the WCAG 2.2+ understanding doc for contrast (minimum) here

Internet Explorer(IE) compatibility

The only other thing to consider is compatibility - if you still support IE8 you cannot use box-shadow or outline - and quite a few screen reader users are still using IE8 due to software compatibility.

However I would advise a different basic stylesheet for IE8 anyway as otherwise you are stuck in the dark ages! I personally only support back to IE9 as that is painful enough!