8

使用内置的 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/

4

1 回答 1

7

当您单独查看代码示例时，它看起来很好：它使用and属性与元素label显式关联。inputforid

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

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

于 2018-11-29T14:05:14.320 回答