Подписи полей формы

Текстовое поле рядом со словом «Email» не подписано, пока элемент label не связан с ним; до этого экранный диктор может сказать только «поле редактирования».

Каждому полю нужно имя

Когда фокус попадает в поле формы, экранный диктор объявляет его подпись, тип и состояние: «Email, поле редактирования, обязательное». Подпись берётся из элемента label, связанного с полем. Связать их можно двумя способами. Дать input атрибут id, а label такой же for, или поместить input внутрь label. В обоих случаях щелчок по тексту подписи тоже переводит фокус в поле, и в маленькие флажки и переключатели становится гораздо легче попасть.

<label for="email">Email</label>
<input id="email" type="email" autocomplete="email">

<label>
  <input type="checkbox" name="news"> Send me the weekly menu
</label>

Критерий успешного применения 3.3.2 «Метки или инструкции» уровня A в WCAG 2.2 требует подписей или инструкций везде, где содержимому нужен ввод пользователя, а 1.3.1 «Информация и смысловые связи» требует, чтобы связь подписи и поля была в коде, а не только на экране. Абзац, который просто стоит над полем ввода, близок к нему только на вид; ничто не сообщает вспомогательным технологиям, что они связаны.

Подсказка не является подписью

Атрибут placeholder показывает серый текст-подсказку внутри пустого поля. Его соблазнительно использовать вместо подписи, и многие формы регистрации так и делают. Беда в том, что он исчезает, как только начинаешь печатать, и уже не проверить, для чего было поле, а ещё он обычно настолько бледный, что не проходит правила контраста из прошлого урока. Используй видимую подпись и, если хочешь, вдобавок подсказку с примером значения.

Группы, назначение и ошибки

Переключателям и связанным флажкам тоже нужна подпись группы. Оберни их в fieldset и помести вопрос в его legend, тогда экранный диктор скажет «Размер, группа» перед «Маленький, переключатель, 1 из 3». Для личных данных атрибут autocomplete сообщает браузеру, для чего поле, с помощью имён из стандарта HTML, таких как name, email, tel, new-password и one-time-code. Критерий 1.3.5 «Указание назначения полей ввода информации» уровня AA требует именно этого, потому что так браузеры могут заполнять поля, а некоторые инструменты показывают рядом с ними знакомые значки.

Если что-то пошло не так, скажи об этом словами. Критерий 3.3.1 «Выявление ошибок» требует, чтобы ошибка ввода была обнаружена и описана пользователю текстом, а не только красной рамкой. В WCAG 2.2 добавлен и критерий 3.3.7 «Повторный ввод»: сведения, которые человек уже ввёл в том же процессе, нужно подставить за него снова или предложить выбрать, а не заставлять печатать их дважды. А 3.3.8 «Доступная аутентификация (минимальные требования)» уровня AA говорит, что шаг входа не должен зависеть от того, чтобы что-то запомнить или переписать, если нет помощи; такой помощью считаются и заполнение поля менеджером паролей, и разрешённая вставка.

Скажи, что нужно, до того как люди начнут

Инструкциям место перед полями, которые они описывают, а не в сообщении об ошибке после неудачи. Если пароль должен быть не короче 15 символов, напиши это рядом с подписью. Отмечай обязательные поля в тексте подписи, например словом «обязательно», и добавляй атрибут required, чтобы браузер тоже это объявлял. Когда появляется сообщение об ошибке, держи его рядом с полем и свяжи их через aria-describedby, указывающий на id сообщения; тогда экранный диктор прочитает сообщение, когда поле получит фокус. И наконец, переведи фокус на первое поле с ошибкой или на сводку ошибок вверху, чтобы пользователь клавиатуры не остался внизу длинной формы, гадая, что произошло.