时间戳

首页 > 解决方案 > 用 box-shadow 替换表单输入的轮廓是否违反任何 WCAG 准则？

html - 用 box-shadow 替换表单输入的轮廓是否违反任何 WCAG 准则？

问题描述

问题

有哪些可访问性缺点可以设置并outline用来突出显示活动输入？它是否违反了WCAG？nonebox-shadow

背景

用户代理样式表突出显示活动元素的outline焦点。要自定义此突出显示，我们可以使用:focus选择器。这适用于矩形输入元素，但在圆形输入上看起来不太好。显示不匹配的正方形。请参见下面的示例，其中红色轮廓是方形的，即使输入具有圆角。

带有圆角的输入框周围的红色方形轮廓

与outline矩形一样，为了更好地匹配圆形元素，样式的另一种方法是替换outline为box-shadow. 这需要设置outline: none，从可访问性的角度来看，这似乎是有争议的。

例子

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">

标签： htmlcssformsaccessibilitywcag

解决方案

简答

使用没有问题，box-shadow或者outline如果您不需要支持 IE8。有一些考虑因素，例如颜色对比度，但从技术上讲，您当前的示例通过了当前的指导（尽管我鼓励您稍微增加颜色对比度）。

更长的答案

您需要考虑的主要事情是颜色对比。只要边框与背景的对比度为 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 对所有相邻颜色。

对于 WCAG 2.2，以下规则适用：

  • 最小区域：焦点指示区域是：
    • 至少与未聚焦组件的 1 CSS 像素厚周长的面积一样大；
    • 沿未聚焦组件的最短边至少与 4 个 CSS 像素边框一样大，并且不小于 2 个 CSS 像素。

显然 WCAG 2.2 只是一个草案，但我认为边界和焦点指标的原则非常接近最终版本。

您可以在此处查看 WCAG 2.2+的对比文档（最低）

Internet Explorer (IE) 兼容性

唯一要考虑的另一件事是兼容性 - 如果您仍然支持 IE8，则无法使用box-shadow或outline-由于软件兼容性，相当多的屏幕阅读器用户仍在使用 IE8 。

但是，无论如何我都会建议 IE8 使用不同的基本样式表，否则您将陷入黑暗时代！我个人只支持回到 IE9，因为那已经够痛苦了！

推荐阅读