Аудит Chrome: элементы формы не имеют связанных меток

Question

Я получаю эту ошибку после проверки страницы моего продукта в Chrome:

Элементы формы не имеют связанных ярлыков

Failing Elements

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

Похоже, что это была исправлена ​​ошибка в ax-core 3.2.0 в соответствии с этой проблемой GitHub , но это исправление до сих пор не включено в Lighthouse начиная с версии Chrome 75.0.3770.142.

Lighthouse использует Ax для проверки доступности, но вы можете запустить Ax как автономное расширение Chrome . Я запустил автономное расширение (версия 3.8.0 с ax-core 3.2.2) на сайте, над которым я работаю, на котором используются визуально скрытые метки форм, и оно прошло; в то время как Маяк все еще потерпел неудачу с ошибкой, которую вы упомянули. Из того, что я могу сказать, основываясь на дополнительных ссылках из результатов аудита, Lighthouse использует версию 3.1 ax-core.

Поскольку стили для .screen-reader-text не используют display:none;, visibility: hidden; или обнуляют ширину или высоту, он должен проходить автономный аудит расширений Ax.