WCAG 3.3.2 Подписи или инструкции

Критерий успеха 3.3.2 нужен для того, чтобы каждый знал, что вводить в форму. Людям с когнитивными нарушениями, пожилым пользователям, пользователям программ экранного доступа (скринридеров) и всем, кто оформляет заказ на маленьком телефоне, помогают понятные подписи, видимые отметки обязательных полей и короткие подсказки о формате. Это уровень A, в EN 301 549 он представлен как пункт 9.3.3.2. Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

Что требует критерий

Подписи или инструкции должны быть, когда содержимое требует ввода от пользователя. W3C отмечает, что «требует» означает «принимает или ожидает ввод», поэтому необязательные поля тоже считаются.

• Подпись — это текст (или компонент с текстовой альтернативой), который показывается всем пользователям и обозначает элемент управления. Это не обязательно HTML-элемент <label>, но подпись должна быть видна всем — в отличие от доступного имени, которое может быть скрытым.
• Инструкции объясняют ожидаемые данные или формат, например «Дата рождения (ДД.ММ.ГГГГ)», какие поля обязательны или к чему относится группа переключателей.

Цель — полезные подсказки без перегрузки: не каждому полю нужен абзац текста, но никому не должно приходиться угадывать.

Типичные ошибки в интернет-магазине

• поля оформления заказа только с текстом-подсказкой (placeholder), который исчезает, когда пользователь начинает печатать;
• поле телефона или карты, разбитое на несколько ячеек без подписи для каждой части;
• обязательные поля, отмеченные только красной звёздочкой, без объяснения, что она означает;
• переключатели способов доставки или чекбоксы согласия без подписи группы;
• поле количества, поиска или подписки с иконкой, но без видимого текста;
• необычный формат (номер плательщика НДС, требования к паролю) без подсказки до того, как пользователь ошибётся.

Как проверить

Автоматически: наша проверка запускает правило form-field-multiple-labels, которое отмечает поля с более чем одной подписью. Связанные правила для отсутствующих доступных имён (например, label, select-name) перечислены в разделе 4.1.2. Видна ли подпись и понятна ли она — решает человек.

Вручную: пройдите каждую форму. Для каждого поля проверьте, что есть видимый текст, который остаётся на экране во время ввода, что обязательные поля указаны текстом, что у групп вариантов есть заголовок или легенда и что особые форматы объяснены до ввода.

Как исправить

• Дайте каждому полю видимый <label for="…">; оставьте плейсхолдеры только для примеров.
• Группируйте переключатели и чекбоксы в <fieldset> с <legend>.
• Отмечайте обязательные поля в подписи («Email (обязательно)») или объясните звёздочку в начале формы.
• Добавьте короткую подсказку о формате и свяжите её через aria-describedby.

Связанные критерии

• 3.3.1 Обнаружение ошибок — что происходит, когда ввод неверен.
• 4.1.2 Имя, роль, значение — программное имя каждого поля.
• 1.3.5 Определение назначения поля ввода — автозаполнение полей с личными данными.

Частые вопросы

Достаточно ли текста-подсказки (placeholder) в качестве подписи?

Это рискованно. Placeholder исчезает, как только пользователь начинает печатать, часто имеет низкий контраст и не всегда зачитывается вспомогательными технологиями. Надёжное решение — видимая подпись, которая остаётся на экране.

Касается ли 3.3.2 только обязательных полей?

Нет. W3C поясняет, что «требует» здесь означает «принимает или ожидает ввод», поэтому необязательным полям тоже нужны подписи или инструкции.

Нужно ли отмечать обязательные поля?

Если часть полей обязательна, это ожидаемый способ выполнить 3.3.2: W3C называет указание обязательных полей в подписи или легенде достаточной техникой. Используйте текст или поясненный символ, а не только цвет.

Чем 3.3.2 отличается от 4.1.2?

3.3.2 — о подписях и инструкциях, которые видят все пользователи. 4.1.2 — о доступном имени, которое считывают программы. У поля может быть скрытое имя, но при этом не быть видимой подписи.