标签未与输入关联

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元素显式关联。forid

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

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