Доступная форма на Tilda: контраст, фокус, размер кнопок и ошибки WCAG 2.2
Доступная форма должна работать не только для пользователя с мышью и идеальным зрением. Ее нужно проверить клавиатурой, при увеличении, на сенсорном экране и в состоянии ошибки. WCAG 2.2 добавляет критерии, связанные с видимостью фокуса, размером целей, повторным вводом и доступной аутентификацией.
Эта статья — практический чек-лист, а не юридическое заключение о соответствии. Конкретные требования зависят от продукта, региона и способа публикации.
С чего начать аудит формы
Опишите цель формы и минимальные данные, которые действительно нужны. У каждого поля должна быть понятная подпись, а обязательность — видимой. Не просите повторно ввести информацию, которая уже есть в контексте, если это не требуется безопасностью.
Проверка текста и ожидания
Проверьте, понимает ли человек, что произойдет после отправки: заявка уйдет менеджеру, откроется оплата или появится подтверждение. Не заменяйте объяснение одним значком. Ошибка должна сообщать, что исправить и где это сделать.
Как проверить клавиатурную навигацию и фокус
Пройдите форму только клавишей Tab. Порядок перехода должен соответствовать визуальной логике, а фокус — оставаться видимым. Если фиксированная шапка закрывает активное поле или кнопку, это проблема читаемости и управления.
Нажмите Enter или пробел там, где это ожидается, и убедитесь, что действие не запускается дважды. Проверьте закрытие сообщений и возврат к полю с ошибкой.
Как проверить контраст и размеры целей
Сравните текст, фон, границы полей, кнопку и состояние фокуса. Не оценивайте контраст только по внешнему впечатлению: используйте проверочный инструмент и сохраните результат для спорных элементов.
Кнопка и ссылка должны быть удобны для касания. Не ставьте рядом несколько мелких действий и не полагайтесь только на цвет, чтобы показать состояние поля.
Как сделать ошибки понятными
Ошибка должна быть связана с конкретным полем и оставаться видимой после попытки отправки. Не стирайте уже введенные значения без причины. Для телефона, email и даты укажите допустимый формат простым текстом.
Проверьте форму с пустыми полями, неверной почтой, длинным именем и вставкой текста из буфера. Ожидаемое поведение должно быть одинаковым на компьютере и телефоне.
Финальный сценарий проверки
Проверьте форму на десктопе и смартфоне, клавиатурой и сенсорным вводом, при увеличении и на медленной сети. Проверьте состояние загрузки и результат после отправки. Убедитесь, что в уведомлении не появляются технические данные или персональная информация другого пользователя.
Если форма зависит от внешнего сервиса, отдельно проверьте, что происходит при его недоступности. Доступность — это не отдельный декоративный этап, а часть надежного пользовательского сценария.
