html - 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 and future-proofing

At the moment the hotpink border contrast ratio is only 2.64:1 with the page background, so swap that for an appropriate colour that has contrast of 3:1 to comply with current contrast requirements and future requirements. (technically you pass current requirements due to the border thickness but I would still improve the contrast ratio)

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

WCAG Silver

As long as you have sufficient contrast and it is thick enough to comply with WCAG silver (so you don't have to redo stuff when that comes into effect) you will be fine.

For WCAG silver the border must be at least 3 CSS pixels wide if contrast ratio is 3:1 and at least 1 CSS pixel wide if contrast is 4.5:1 at current draft spec. (you fail this at the moment as discussed earlier).

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

You can see a current spec outline here for contrast (minimum)

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!