html - 标签与输入无关

Question

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

这是从 Subscribe2 创建的代码片段

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

Answer 1

当您单独查看代码示例时，它看起来不错:它有一个 label与 input 明确关联元素使用 for和 id属性。

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

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