Что это
Правильно закодированная подпись — это текст, явно связанный с конкретным полем формы в базовом коде страницы (обычно через атрибут for, соответствующий id поля), так что скринридер объявляет эту подпись в момент, когда посетитель перемещает фокус в поле — например, «Электронная почта, редактирование текста». Это более строгое, более техническое требование, чем просто наличие похожего на подпись текста, видимого где-то рядом с полем, что рассматривается в нашем общем руководстве по подписям полей форм, ориентированном на конверсию.
Поле может выглядеть идеально подписанным для зрячего посетителя (текст расположен прямо рядом с полем), хотя вообще не имея настоящей закодированной связи между этим текстом и полем — что и есть именно тот пробел, который ищет эта проверка, ориентированная на доступность.
Почему это важно
Скринридер не видит визуальный макет страницы — он читает базовую структуру кода, поэтому подпись, которая только визуально расположена рядом с полем, но явно не связана с ним в коде, может никогда не быть объявлена, когда пользователь скринридера достигает этого поля. Не слыша, для чего предназначено поле, они остаются гадать или полностью пропускают его, что может означать, что пользователь скринридера просто не может заполнить форму, которую зрячий посетитель находит совершенно простой.
Это одно из наиболее устоявшихся, конкретно названных требований в WCAG (стандартных руководствах по доступности, которым многие организации юридически обязаны соответствовать), именно потому что формы настолько центральны для фактического выполнения задачи в интернете — регистрации, оформления заказа, обращения.
Как это исправить
- Для каждого поля формы добавьте элемент
<label>с атрибутомfor, точно соответствующим атрибутуidэтого поля. - В качестве альтернативы оберните поле непосредственно внутри самого тега
<label>, что создаёт ту же явную связь без необходимости совпадающих ID. - Для поля без видимой подписи по замыслу (например, поле только с иконкой поиска) используйте
aria-label="Поиск"непосредственно на поле, чтобы скринридер всё равно объявлял его назначение. - Избегайте полагаться только на текст-заполнитель как замену настоящей подписи — скринридеры непоследовательно обрабатывают текст-заполнитель, и он в любом случае исчезает после ввода текста.
- Протестируйте, перемещаясь по вашей форме только с клавиатурой и бесплатным скринридером (NVDA, VoiceOver), чтобы убедиться, что каждое поле объявляет чёткое назначение.