Метка не связана с вводом

Question

Использование встроенного 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/

Answer 1

Когда вы смотрите на образец кода изолированно, он выглядит нормально: он имеет label, явно связанный с элементом input, использующим атрибуты for и id.

Однако,Когда вы просматриваете сайт, он выглядит иначе: из-за правила стиля .s2_form_widget label { display: none; } метка невидима.(Это можно увидеть при использовании Инспектора в Firefox, перейдите к метке в дереве DOM и проверьте связанные стили.)

Обратите внимание, что display: none не только скрывает метку визуально, но и для экраначитатели.В результате элемент ввода не имеет метки с точки зрения программы чтения с экрана или другой вспомогательной технологии и не соответствует требованию, что элементам управления формы нужны явные метки.(В качестве альтернативы вы можете попытаться скрыть метку за пределами экрана с отрицательным полем.)