问题描述
问题
将 outline 设置为 none 而使用 Box-shadow 来突出显示活动输入有哪些可访问性缺点？它是否完全违反了 WCAG？
背景
用户代理样式表在焦点上突出显示活动元素的 outline。要自定义此突出显示，我们可以使用 :focus 选择器。这适用于矩形输入元素，但在圆形输入上看起来不太好。显示不匹配的方块。请参见下面的示例，其中红色轮廓为方形，即使输入具有圆角。
由于 outline 是矩形，为了更好地匹配圆角元素，另一种样式化方法是将 outline 替换为 Box-shadow。这需要设置 outline: none，从可访问性角度来看 seems controversial。
示例
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">解决方法
简答
如果您不需要支持 IE8，使用 box-shadow 或 outline 没有问题。有一些考虑因素，例如颜色对比度，但从技术上讲，您当前的示例通过了当前的指导（尽管我鼓励您稍微增加颜色对比度）。
更长的答案
您需要考虑的主要问题是颜色对比度。只要边框与背景的对比度为 3:1，那么在当前的指导下就可以了。
不过，WCAG 2.2 将于 2021 年 6 月/7 月生效，因此您不妨为此做好准备。
WCAG 2.2
只要您有足够的对比度并且足够厚以符合 WCAG 2.2（因此在生效时您不必重做），您就可以了。以下是即将到来的规则更改的摘要（您给出的示例通过了）：
对比度变化：对焦指示区域的颜色变化与未对焦状态的颜色的对比度至少为3：1。
以下是对上述内容的补充：
对比度或厚度：焦点指示区域与最小区域或更大区域的所有相邻颜色的对比度为 3:1，或者具有至少 2 个 CSS 像素的厚度。
焦点需要至少 3:1 变化，并且还需要：
- 2px 厚和/或
- 3:1 对 ALL 相邻颜色。
对于 WCAG 2.2，以下规则适用：
-
最小区域：焦点指示区域是：
- 至少与未聚焦组件的 1 CSS 像素周长面积一样大；
- 沿着未聚焦组件的最短边至少与 4 个 CSS 像素边框一样大，并且不小于 2 个 CSS 像素。
显然 WCAG 2.2 只是一个草案，但我认为边界和焦点指标的原则已经接近最终版本。
你可以看到 WCAG 2.2+ understanding doc for contrast (minimum) here
Internet Explorer(IE) 兼容性
唯一需要考虑的另一件事是兼容性 - 如果您仍然支持 IE8，则由于软件兼容性，您不能使用 box-shadow 或 outline - 和 quite a few screen reader users are still using IE8。
不过，我还是建议为 IE8 使用不同的基本样式表，否则您将陷入黑暗时代！我个人只支持回到 IE9 因为那已经够痛苦了！