WCAG 3.3.1 Обнаружение ошибок

Критерий успеха 3.3.1 нужен для того, чтобы человек заметил, что форма не принята, и понял, какое поле заполнено неверно. Незрячие пользователи не видят красную рамку, люди с нарушением цветовосприятия могут её не заметить, а люди с когнитивными нарушениями могут не понять иконку. В магазине это часто разница между завершённым заказом и брошенной корзиной. Это уровень A, в EN 301 549 он представлен как пункт 9.3.3.1. Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

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

Если ошибка ввода обнаружена автоматически, то:

1. поле с ошибкой указывается, и
2. ошибка описывается пользователю текстом.

Ошибка ввода — это введённая пользователем информация, которая не принимается. Сюда относятся и пропущенные обязательные данные, и данные вне требуемого формата или допустимых значений. WCAG не предписывает, как именно отображать ошибки. Подсказка, как исправить ошибку, — это отдельный критерий 3.3.3 «Подсказки по исправлению ошибок».

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

• неверно заполненное поле отмечено только красной рамкой или красной иконкой, без текста;
• после «Оформить заказ» страница перезагружается без сообщения или только с общим «Что-то пошло не так»;
• сообщение появляется вверху страницы, но не говорит, о каком поле речь;
• ошибки карты из платёжного виджета показываются картинкой или исчезают через несколько секунд;
• текст ошибки виден, но не связан с полем, поэтому пользователь скринридера, находясь в поле, его не слышит.

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

Автоматически: в нашей проверке нет правила для этого критерия. Автоматическое сканирование не отправляет ваши формы с неверными данными, поэтому нужна ручная проверка.

Вручную: для каждой важной формы — регистрация, вход, подписка, обратная связь, оформление заказа, адресная книга — отправьте её с пустыми обязательными полями, затем с неверными форматами (email без @, короткий индекс, прошедший срок действия карты). Убедитесь, что каждая ошибка показана текстом, называет поле или указывает на него и зачитывается скринридером, когда вы переходите в поле.

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

• Показывайте текстовое сообщение рядом с каждым неверным полем, например «Адрес эл. почты: введите адрес вида [email protected]».
• Свяжите сообщение с полем через aria-describedby и установите полю aria-invalid="true".
• Для длинных форм добавьте в начале сводку ошибок со ссылками на поля и переводите на неё фокус после отправки.
• Оставляйте сообщения видимыми, пока ошибка не исправлена; не полагайтесь только на цвет или иконки.

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

• 3.3.3 Подсказки по исправлению ошибок — подскажите, как исправить ошибку.
• 4.1.3 Сообщения о состоянии — объявляйте ошибки, которые появляются без перемещения фокуса.
• 1.4.1 Использование цвета — цвет не должен быть единственным сигналом.

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

Достаточно ли красной рамки, чтобы показать ошибку в форме?

Нет. WCAG 3.3.1 требует описать ошибку текстом. Один только цвет к тому же нарушает 1.4.1 «Использование цвета». Добавьте рядом с полем сообщение, например «Введите почтовый индекс».

Применяется ли 3.3.1 к пустым обязательным полям?

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

Указывает ли WCAG, где должны появляться сообщения об ошибках?

Конкретный способ отображения не требуется. Распространённая хорошая практика — сообщение рядом с полем, связанное с ним через aria-describedby, а для длинных форм — сводка в начале формы.