标签与输入无关答案

【问题标题】：Label not associated to input标签与输入无关
【发布时间】：2019-04-30 18:07:15
【问题描述】：

使用内置的 Chrome Lighthouse 在 WP 网站上运行可访问性审核显示注册字段由于没有关联标签而无效。我以前遇到过这个问题，我不明白为什么它认为它没有关联。我可以通过直接将aria-label 标签添加到input 来让它通过，但我不应该这样做。

这是从 Subscribe2 创建的代码 sn-p

<label for="s2email">Your email:</label>
<br>
<input type="text" name="email" id="s2email" value="Enter email address..." size="20" onfocus="if (this.value === 'Enter email address...') {this.value = '';}" onblur="if (this.value === '') {this.value = 'Enter email address...';}">

可以在这里找到：https://blog.collaborative.org/

【问题讨论】：

您的示例中缺少某些内容。如果我将您的示例复制/粘贴到一个简单的页面中，它会通过灯塔（和斧头）。正确指向。当具有 NAME 属性但没有 ID 属性时，我通常会看到问题。也就是说，指向“s3email”，但具有 name="s2email"（用于 javascript）并且没有 id="s2email"。
另请注意，您的onfocus 指向的是字符串而不是函数。这是另一个提示，您可能键入了代码示例，而不是复制/粘贴有问题的原始代码。我假设您实际上没有指向字符串的 on 处理程序。
for/id 关系在这里看起来是正确的。我们可以看到实际的页面，看看整个上下文吗？或者，您能否提供该工具提供的确切报告？
ID 是否唯一？如果有两个具有相同 ID 的输入可能会导致此问题。
当然，为了简化它，我已经将它剥离了一点。将更新 OP。

标签： html accessibility forms html-validation lighthouse

【解决方案1】：

当您单独查看代码示例时，它看起来很好：它有一个使用for 和id 属性与input 元素显式关联的label。

但是，当您检查该站点时，它看起来有所不同：由于样式规则.s2_form_widget label { display: none; }，该标签是不可见的。（当您在 Firefox 中使用 Inspector 时，您可以看到这一点，移动到 DOM 树中的标签并检查关联的样式。）

请注意，display: none 不仅在视觉上隐藏标签，而且对于屏幕阅读器也是如此。因此，从屏幕阅读器或其他辅助技术的角度来看，输入元素没有标签，并且无法满足表单控件需要显式标签的要求。（作为替代方案，您可以尝试以负边距将标签隐藏在屏幕外。）

【讨论】：

啊，有道理！我会调整并测试。
负边距对我不起作用。有什么方法可以抑制该错误？
@JSmith 你能把它作为一个单独的问题发布吗？（使用负边距将内容隐藏在屏幕外是一种记录在案的技术。）
@JSmith 参见例如CSS in Action 在 WebAIM 网站上。