用框阴影替换表单输入的轮廓是否违反任何 WCAG 准则？
Does replacing a form input's outline with box-shadow violate any WCAG guidelines?
问题
将 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的对比度。
以下是除上述：
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.
焦点至少需要 3:1 更改 并且还需要：
- 要么 2px 厚 and/or
- 3:1 反对 ALL 相邻颜色。
对于 WCAG 2.2，以下规则适用：
- 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.
显然 WCAG 2.2 只是一个草案，但我认为边界和焦点指示器的原则非常接近最终版本。
你可以看到WCAG 2.2+ understanding doc for contrast (minimum) here
Internet Explorer(IE) 兼容性
唯一需要考虑的另一件事是兼容性 - 如果您仍然支持 IE8，则由于软件兼容性，您无法使用 box-shadow or outline - and quite a few screen reader users are still using IE8。
不过，无论如何，我建议为 IE8 使用不同的基本样式表，否则您将陷入黑暗时代！我个人只支持回到IE9，因为那已经够痛苦了！
问题
将 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的对比度。
以下是除上述：
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.
焦点至少需要 3:1 更改 并且还需要：
- 要么 2px 厚 and/or
- 3:1 反对 ALL 相邻颜色。
对于 WCAG 2.2，以下规则适用：
- 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.
显然 WCAG 2.2 只是一个草案，但我认为边界和焦点指示器的原则非常接近最终版本。
你可以看到WCAG 2.2+ understanding doc for contrast (minimum) here
Internet Explorer(IE) 兼容性
唯一需要考虑的另一件事是兼容性 - 如果您仍然支持 IE8，则由于软件兼容性，您无法使用 box-shadow or outline - and quite a few screen reader users are still using IE8。
不过，无论如何，我建议为 IE8 使用不同的基本样式表，否则您将陷入黑暗时代！我个人只支持回到IE9，因为那已经够痛苦了！