标签与输入无关

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不仅可以在视觉上隐藏标签，还可以为屏幕阅读器隐藏。因此，从屏幕阅读器或其他辅助技术的角度来看，输入元素没有标签，并且不能满足表单控件需要显式标签的要求。 （作为替代方案，您可以尝试在屏幕外隐藏带有负边距的标签。）