Chrome 审核：表单元素没有关联的标签答案

【问题标题】：Chrome audit: Form elements do not have associated labelsChrome 审核：表单元素没有关联的标签
【发布时间】：2019-07-20 01:34:51
【问题描述】：

我在 Chrome 中审核我的产品页面后收到此错误：

表单元素没有关联的标签

失败的元素

input#quantity_5ce535030e171.input-text.qty.text

input#woocommerce-product-search-field-0.search-field

标签清楚地表明带有for 属性的input 标签。

元素 #1：

<div class="quantity">
<label class="screen-reader-text" for="quantity_5ce535030e171">My product name</label>
<input type="number" id="quantity_5ce535030e171" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" inputmode="numeric">
</div>

元素 #2：

<form role="search" method="get" class="woocommerce-product-search" action="https://example.com/example-product/">
<label class="screen-reader-text" for="woocommerce-product-search-field-0">Search for:</label>
<input type="search" id="woocommerce-product-search-field-0" class="search-field" placeholder="Search products…" value="" name="s">
<button type="submit" value="Search">Search</button>
<input type="hidden" name="post_type" value="product">
</form>

html 中有什么不正确的地方或者 Chrome 给出了错误的错误吗？

【问题讨论】：

您的代码对我来说似乎没问题。您可以尝试将<input> 嵌套为<label> 的子级。
我已将关联的 input 标签嵌套为 label 的子标签，不幸的是我仍然收到相同的错误。最新版 Chrome 上的所有内容。也许是这个问题？ github.com/GoogleChrome/lighthouse/issues/8435
这似乎很相关。如果您安装 Lighthouse 扩展程序，您也许可以检查问题是否已修复。我相信该扩展程序正在运行 Lighthouse v5。
我已经测试了 Lighthouse 扩展，并且确实不再出现此错误。希望这很快就会发布到浏览器中。

标签： html google-chrome-devtools

【解决方案1】：

看起来这是根据this GitHub issue 在 axe-core 3.2.0 中修复的错误，但从 Chrome 版本 75.0.3770.142 开始，该修复仍未纳入 Lighthouse。

Lighthouse 将 Ax 用于其审计的可访问性部分，但您可以将 Ax 作为独立的 Chrome extension 运行。我在我正在处理的一个使用视觉隐藏表单标签的网站上运行了独立扩展（版本 3.8.0 和 axe-core 3.2.2）并且它通过了；而 Lighthouse 仍然因您提到的错误而失败。据我所知，根据审计结果中的了解更多链接，Lighthouse 使用的是 3.1 版的 axe-core。

只要 .screen-reader-text 的样式不使用 display:none;、visibility: hidden; 或将宽度或高度归零，它就应该通过独立的 Ax 扩展审核。

【讨论】：