标签与输入无关
Label not associated to input
使用内置的 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/
当您单独查看代码示例时，它看起来不错：它有一个 label 使用 for 和 id 与 input 元素显式关联属性。
但是，当您检查站点时，它看起来不一样：由于样式规则 .s2_form_widget label { display: none; }，标签是不可见的。 （在 Firefox 中使用检查器时可以看到这一点，移动到 DOM 树中的标签并检查关联的样式。）
请注意 display: none 不仅在视觉上隐藏标签，而且在屏幕上 readers。因此，从屏幕 reader 或其他辅助技术的角度来看，输入元素没有标签，并且不符合表单控件需要显式标签的要求。 （作为替代方案，您可以尝试使用负边距将标签隐藏在屏幕外。）
使用内置的 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/
当您单独查看代码示例时，它看起来不错：它有一个 label 使用 for 和 id 与 input 元素显式关联属性。
但是，当您检查站点时，它看起来不一样：由于样式规则 .s2_form_widget label { display: none; }，标签是不可见的。 （在 Firefox 中使用检查器时可以看到这一点，移动到 DOM 树中的标签并检查关联的样式。）
请注意 display: none 不仅在视觉上隐藏标签，而且在屏幕上 readers。因此，从屏幕 reader 或其他辅助技术的角度来看，输入元素没有标签，并且不符合表单控件需要显式标签的要求。 （作为替代方案，您可以尝试使用负边距将标签隐藏在屏幕外。）