WCAG 3.2.2 При вводе данных

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

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

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

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

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

• список «Сортировать по» или выбор валюты перезагружает страницу сразу после выбора варианта, без предупреждения;
• выбор страны при оформлении заказа переводит фокус или перезагружает всю форму;
• выбор варианта (размера, цвета) переводит на другой URL товара;
• поле купона или количества автоматически отправляет форму при изменении значения;
• установка флажка открывает новое окно, например со страницей условий.

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

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

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

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

• Добавьте кнопку «Применить», «Перейти» или «Обновить» и выполняйте действие только после её нажатия.
• Если мгновенное поведение нужно сохранить, сообщите о нём перед элементом, например «Выбор валюты перезагружает страницу».
• Обновляйте содержимое на месте (цену, наличие, результаты фильтра), не перемещая фокус, и сообщайте об изменении сообщением о состоянии.
• Никогда не открывайте новые окна из флажков или переключателей.

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

• 3.2.1 При получении фокуса — сам по себе фокус не должен менять контекст.
• 4.1.3 Сообщения о состоянии — сообщайте об обновлённых результатах, не перемещая фокус.
• 3.3.2 Подписи или инструкции — инструкции, предупреждающие о поведении.

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

Может ли выпадающий список выполнять переход при изменении?

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

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

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

Касается ли 3.2.2 кнопок и ссылок?

Нет. Активация кнопки или ссылки — это не изменение настройки. 3.2.2 касается изменения значения таких элементов, как текстовые поля, флажки, переключатели и выпадающие списки.