WCAG 3.2.2 Під час введення

Критерій успіху 3.2.2 (в оригіналі — On Input, тобто «при введенні») захищає людей від несподіваних стрибків під час заповнення форми. Користувачі програм зчитування з екрана, клавіатури та люди з когнітивними порушеннями можуть переглядати список вибору варіант за варіантом або ставити прапорець, щоб побачити, що він робить. Якщо вже це перезавантажує сторінку чи надсилає форму, вони губляться або надсилають те, чого не мали на увазі. Це рівень 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 стосується зміни значення елементів керування, як-от текстових полів, прапорців, перемикачів і списків вибору.