Доступность форм: подписи, ошибки и подтверждение отправки

Прямой ответ

Поле формы связано с подписью, а ошибка объявляется текстом рядом с полем, поэтому назначение поля и причина отказа доступны без визуального контроля.

<label for="email">Электронная почта</label>
<input id="email" name="email" required aria-describedby="email-err">
<p id="email-err" role="alert">Укажите адрес в формате name@example.com</p>

Сообщение связано с полем и объявляется при появлении, поэтому пользователь узнаёт причину отказа без поиска на странице. О доступности — в статье про доступность веб-интерфейсов.

Подпись поля и способ связи

Подпись объявляет назначение поля, поэтому связь между элементом и подписью устанавливается явно.

Явная связь. Подпись ссылается на поле идентификатором, поэтому название читается вместе с элементом.

Неявная связь. Подпись оборачивает поле, поэтому связь определяется вложенностью, но явная связь надёжнее.

Заполнитель вместо подписи. Текст внутри поля не заменяет подпись, поскольку исчезает после ввода и не читается как название.

Практическое следствие: поле без подписи объявляется типом без названия, поэтому пользователь не определяет, какое значение требуется ввести.

Отдельный аспект — группы полей. Набор связанных полей сопровождается общим названием группы, поэтому назначение отдельного поля читается вместе с названием группы.

Объявление ошибки и обязательные поля

Ошибка объявляется текстом рядом с полем, поэтому причина отказа доступна без различения цвета и поиска по странице.

Текст ошибки. Сообщение описывает причину отказа и способ исправления, поэтому пользователь определяет требуемое действие.

Связь сообщения с полем. Сообщение связано с полем, поэтому объявление читается при получении полем фокуса.

Обязательность поля. Требование заполнения объявляется до ввода, поэтому пользователь определяет обязательные поля до отправки.

Практическое следствие: ошибка, переданная только цветом границы, не сообщает причину отказа, поэтому пользователь не определяет требуемое исправление.

Подтверждение отправки и возврат фокуса

Результат отправки объявляется явно, поэтому пользователь узнаёт об успехе либо отказе без визуального контроля.

Объявление результата. Сообщение об успехе либо отказе читается после отправки, поэтому результат действия доступен.

Переход к ошибке. При отказе фокус перемещается к первому полю с ошибкой, поэтому исправление начинается с нужного места.

Сохранение введённого. Введённые значения сохраняются при отказе, поэтому повторный ввод не требуется.

Практическое следствие: отправка без объявления результата оставляет пользователя в неопределённости, поскольку успешность действия не подтверждается.

Об ARIA-атрибутах — в статье про ARIA-атрибуты; о проверке объявлений — в статье про экранные читалки.

Практика: настройка доступной формы

1. Связывайте каждое поле с подписью явно. Название читается вместе с элементом, поэтому назначение поля определено.

2. Не используйте заполнитель вместо подписи. Текст внутри поля исчезает после ввода и не читается как название.

3. Называйте группы связанных полей. Назначение отдельного поля читается вместе с названием группы.

4. Объявляйте обязательность поля до ввода. Пользователь определяет обязательные поля до отправки формы.

5. Сообщайте ошибку текстом рядом с полем. Причина отказа и способ исправления доступны без различения цвета.

6. Связывайте сообщение об ошибке с полем. Объявление читается при получении полем фокуса.

7. Объявляйте результат отправки и перемещайте фокус к ошибке. Пользователь узнаёт результат и начинает исправление с нужного поля.

Рекомендации:

1. Не передавайте ошибку только цветом. Причина отказа недоступна без цветового восприятия, поэтому требуется текст.
2. Учитывайте сохранение введённых значений при отказе. Повторный ввод после отказа увеличивает число шагов.
3. Сопоставляйте текст ошибки с требуемым действием. Сообщение без способа исправления не помогает пользователю.
4. Фиксируйте проверку формы в процессе разработки. Нарушение обнаруживается до выпуска.
5. Пересматриваем подписи при добавлении нового поля. Новое поле требует связи с подписью.

Практический сценарий: пользователь не узнавал причину отказа отправки

Контекст: форма не отправлялась, но пользователь не получал сведения о причине, при этом визуально поля были выделены.

1. Диагностика. Проверка показала, что ошибка передавалась только цветом границы поля. Текстовое сообщение отсутствовало, а фокус оставался на кнопке отправки, поэтому пользователь не определял поле с ошибкой.
2. Причина. Состояние ошибки не объявлялось текстом, и переход к полю с ошибкой не выполнялся, поэтому причина отказа была недоступна.
3. Действия. (а) Добавили текстовое сообщение рядом с каждым полем с описанием причины и способа исправления; (б) связали сообщения с полями, чтобы объявление читалось при получении фокуса; (в) реализовали перемещение фокуса к первому полю с ошибкой после отказа; (г) объявили результат отправки, чтобы успешность действия подтверждалась; (д) обеспечили сохранение введённых значений при отказе, чтобы повторный ввод не требовался.
4. Результат. Причина отказа доступна текстом, а фокус перемещается к полю с ошибкой, поэтому исправление выполняется без поиска по странице.

Вывод: ошибка, переданная только цветом, не сообщает причину отказа, поэтому пользователь не определяет требуемое исправление. Текстовое сообщение, связанное с полем, и перемещение фокуса к ошибке делают причину отказа доступной.

FAQ

Можно ли использовать заполнитель вместо подписи поля? Нет, текст внутри поля исчезает после ввода и не читается как название, поэтому назначение поля остаётся неопределённым.

Как объявить ошибку заполнения? Текстом рядом с полем, связанным с элементом. Сообщение описывает причину отказа и способ исправления.

Что должно происходить при отказе отправки? Фокус перемещается к первому полю с ошибкой, а введённые значения сохраняются, поэтому исправление начинается с нужного места.

Как объявить обязательность поля? До ввода значения. Пользователь определяет обязательные поля до отправки формы, а не после отказа.

Источники: W3C WAI Forms Tutorial, WCAG 2.2 Labels or Instructions, WCAG 2.2 Error Identification — ссылки в шапке.