时间戳

首页 > 解决方案 > 如何修复此 WCAG 错误“此表单控件具有空白标签或标题。”

html - 如何修复此 WCAG 错误“此表单控件具有空白标签或标题。”

问题描述

我正在我正在处理的网站上运行 Sortsite 以符合 ADA 标准，我收到以下消息：

此表单控件有一个空白标签或标题。将描述性文本添加到表单控件的标签。

我尝试添加带有一些信息的标签元素，但将其隐藏，因为我们不希望它显示。

<label style="display: none;" for="slide1">First slide</label>
<input checked type="radio" name="slider" id="slide1" title="First set of slides" />

标签： htmlcssaccessibilitywcag

解决方案

如果您不希望标签在屏幕上可见，请使用带有如下代码的 .visually-hidden、.sr_only CSS 类将其置于屏幕外。 切勿使用 display:none .，因为它隐藏了所有人的标签，包括屏幕阅读器用户。

.visually-hidden {
position: absolute;
left: -2px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

如果您使用像 bootstrap 这样的框架，他们很有可能已经提出了这样的类。

如果你可以这样做，最好总是有一个标签，即使它在屏幕外，而不是使用 aria-label。ARIA 的第一条黄金法则是，只有在真正需要的时候才应该使用它。在这里你可以很容易地避免它。

推荐阅读