После успешной отправки формы перенаправляйте пользователя только тогда, когда для продолжения действительно нужна отдельная страница. Перед переходом подтвердите сохранение данных, покажите понятный результат и обеспечьте доступ к заголовку новой страницы или сообщению об успехе. При ошибке оставьте форму открытой, обозначьте проблему и сохраните введённые значения.
Что проверить перед настройкой перенаправления
- Переход происходит только после подтверждённой успешной обработки данных.
- На новой странице сразу понятно, что отправка завершена и что делать дальше.
- При ошибке пользователь остаётся в форме, видит причину и может исправить данные.
- После перехода клавиатурный фокус оказывается в осмысленном месте.
- Сценарий проверен без мыши и со скринридером.
Сначала определите, нужен ли переход на другую страницу
Отдельная страница подходит, если после отправки человеку нужны новые инструкции, номер обращения, сведения о следующих шагах или возможность продолжить сценарий. Например, после регистрации можно перенаправить на страницу подтверждения почты.
Не перенаправляйте пользователя автоматически, если достаточно короткого подтверждения рядом с формой. Для небольшого сообщения или формы обратной связи изменение страницы может усложнить создание формы обратной связи на сайте: пользователь теряет контекст, а скринридер не всегда сообщает о смене содержимого.
Подготовьте понятное сообщение об успешной отправке
До настройки формы подготовьте адрес страницы подтверждения, текст результата и способ объявить о нём вспомогательным технологиям. Убедитесь, что у команды есть доступ к серверной логике либо к маршрутам приложения - нужный вариант зависит от того, как устроена разработка веб-сайтов.
- Текст: сообщите, что именно произошло, и укажите следующий шаг, если он есть.
- Страница: задайте уникальный заголовок и проверьте, что её адрес можно открыть напрямую.
- Обработка ошибок: предусмотрите возврат к форме без потери безопасно сохранённых значений.
- Тестовая среда: проверьте сценарии успеха и ошибки до публикации.
Не помещайте в URL личные данные и содержимое полей. Для обычной отправки через POST сервер может после успешной обработки вернуть перенаправление на страницу результата; статус 303 указывает браузеру выполнить следующий запрос методом GET. Это помогает избежать повторной отправки при обновлении страницы.
Сохраните доступ к ошибкам и введённым данным
Перед настройкой перенаправления проверьте подготовку формы.
- Определены отдельные состояния успеха и ошибки.
- Ошибки связаны с соответствующими полями и описаны понятным текстом.
- При неуспешной отправке введённые значения сохраняются, кроме чувствительных данных, которые не следует повторно показывать.
- Подготовлен заголовок или сообщение, к которому можно перевести фокус.
Затем настройте обработку по шагам:
- Проверьте данные на сервере. Не считайте форму успешно отправленной только потому, что браузер передал запрос. Сначала подтвердите, что сервер принял и обработал данные.
- При ошибке верните форму с пояснениями. Покажите общее сообщение об ошибке и свяжите каждую проблему с нужным полем. Сохраните безопасные введённые значения, чтобы человеку не пришлось заполнять всё заново.
- После успеха выберите подтверждение. Если отдельная страница не нужна, выведите сообщение рядом с формой и объявите об изменении через подходящий статусный регион, например с атрибутом
role="status". - Если нужен переход, верните перенаправление. Для серверной обработки после POST используйте ответ перенаправления на страницу результата, например с кодом 303. На странице подтвердите результат текстом, а не только цветом или значком.
- Проверьте повторную отправку и возврат. Обновите страницу результата и воспользуйтесь кнопкой возврата. Убедитесь, что браузер не отправляет форму повторно неожиданным образом, а пользователь может вернуться и исправить данные.
Настройте перенаправление с учётом клавиатуры и фокуса
После перехода пользователь должен понять, где он оказался. Проверьте результат по списку:
- Заголовок страницы подтверждения точно описывает её назначение.
- После загрузки серверной страницы фокус при необходимости установлен на основной заголовок с программно доступной фокусировкой, например через
tabindex="-1". - В одностраничном приложении после смены маршрута обновляется заголовок документа и фокус перемещается на заголовок нового содержимого.
- Фокус не теряется в начале документа и не остаётся на элементе уже скрытой формы.
- С клавиатуры можно продолжить работу и перейти к следующему доступному элементу.
- При ошибке фокус не уходит на страницу успеха, а пользователь получает сообщение о проблеме.
- Уведомление о результате не дублируется несколькими конкурирующими сообщениями.
Выберите подходящий сценарий для сервера или SPA
При классической отправке браузер загружает ответ сервера. При работе SPA маршрут меняется без полной загрузки документа, поэтому разработчик должен отдельно обновить заголовок страницы и управлять фокусом. Для настройки формы отправки на сайте заранее определите, какой сценарий используется.
- Перенаправлять до подтверждения успешной обработки - пользователь может увидеть ложное подтверждение.
- Показывать ошибку только цветом или значком, без текста и связи с полем.
- Очищать все поля после неудачной отправки и заставлять пользователя вводить данные повторно.
- В SPA менять маршрут, но оставлять фокус на кнопке отправки или скрытом элементе старого экрана.
- Считать, что смена URL сама по себе уведомит скринридер о результате.
- Передавать введённые данные в адресной строке или сохранять чувствительные значения без необходимости.
- Не предусматривать возможность повторного запроса после сетевого сбоя.
Редирект после отправки формы должен подтверждать завершённую операцию, а не подменять её проверку. Если запрос не прошёл или сервер не ответил, покажите состояние ошибки и предложите безопасный способ повторить действие.
Проверьте переходы скринридером и без мыши
Выберите способы проверки, подходящие проекту:
- Клавиатура: отправьте форму клавишей Enter или пробелом на кнопке, затем проверьте положение фокуса и возможность продолжить навигацию.
- Скринридер: проверьте, объявляются ли заголовок новой страницы, сообщение об успехе и ошибки полей.
- Тестовые сценарии: выполните успешную отправку, отправку с некорректными данными и повтор после сбоя сети.
- Проверка адреса напрямую: откройте страницу подтверждения без предварительной отправки и убедитесь, что её содержание не создаёт ложного впечатления о совершённом действии.
Доступность веб-форм для сайта зависит не только от разметки полей: важны понятные состояния, сохранение контекста и предсказуемое поведение после отправки.
Разбор нестандартных сценариев после отправки формы
Нужно ли перенаправлять после каждой успешной отправки?
Нет. Если достаточно короткого подтверждения рядом с формой, оставьте пользователя на той же странице и объявите об успехе доступным способом. Отдельная страница уместна, когда на ней есть полезная информация или следующий шаг.
Как сообщить об успехе в SPA без полной перезагрузки?
Обновите заголовок документа и переведите фокус на основной заголовок нового представления. Если форма остаётся на экране, используйте статусное сообщение, которое вспомогательные технологии смогут объявить.
Что делать, если сервер отклонил данные?
Не перенаправляйте на страницу успеха. Верните пользователя к форме, покажите текст ошибки, свяжите его с проблемным полем и сохраните безопасно введённые значения.
Можно ли открыть страницу подтверждения напрямую?
Да, но её текст не должен утверждать, что форма отправлена, если приложение этого не проверяло. При необходимости показывайте нейтральное содержание или проверяйте состояние операции на сервере.
Нужно ли перемещать фокус после серверного перенаправления?
Проверьте, что после загрузки новой страницы клавиатурная навигация начинается предсказуемо. Если браузер не переводит фокус на основной заголовок, предусмотрите доступную фокусировку заголовка и протестируйте её со скринридером.
Как не допустить повторной отправки при обновлении?
После успешной обработки POST используйте перенаправление на страницу результата, чтобы она загружалась отдельным GET-запросом. Дополнительно проверьте поведение кнопок возврата и обновления в целевых браузерах.
Автор: Ирина Белова.