Question

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

表单元素没有关联的标签

失败元素

input#quantity_5ce535030e171.input-text.qty.text

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

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

元素＃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中是否有任何不正确的地方提供了错误错误？

Answer 1

貌似这是this GitHub issue根据axe-core 3.2.0修复的错误，但是从Chrome 75.0.3770.142版开始，该修复仍未合并到Lighthouse中。

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

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

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

1 个答案: