Контактная форма по EAA: чек-лист для веб-разработчиков
Информация о статье
Автор: Дмитрий Дугарев
Формы являются ключевыми точками взаимодействия на Вашем веб-сайте. Поэтому крайне важно, чтобы они были доступны для всех пользователей – независимо от их способностей или используемых технологий. Этот чек-лист из моего полного руководства по доступным формам поможет Вам проверить наиболее важные аспекты доступности в Ваших формах.
Чек-лист для базовой структуры и инструкций
- Имеет ли каждое поле формы постоянно видимый
<label>-элемент? [1] - Расположен ли элемент
<label>перед соответствующим полем ввода? [2] - Связан ли каждый
<label>сidсоответствующего поля через атрибутfor? [3] - Являются ли ID всех элементов формы на странице уникальными? [4]
- Есть ли перед формой общие инструкции (например, о маркировке обязательных полей) и/или сводка ошибок? [5]
- Помечены ли обязательные поля визуально (например,
*) И программно (required,aria-required="true")? [6] - Имеют ли все интерактивные элементы (кнопки, ссылки, радиокнопки, флажки) минимальную область нажатия 24x24 CSS-пикселя? [7]
- отсутствует ли горизонтальная прокрутка при малых размерах экрана (например, ширина 320px)? [8]
Управляемость с клавиатуры
- Является ли порядок фокуса при навигации с помощью клавиши
Tabлогичным и интуитивно понятным? [9] - Является ли фокус клавиатуры (например,
outline) всегда четко видимым и имеет ли он достаточный контраст? [10]
Группировка полей ввода
- Обязательно ли все группы радиокнопок и флажков объединены в один
<fieldset>? [11] - Имеют ли эти группы
<fieldset>содержательный<legend>, который задает "вопрос" к группе? [12] - Группируются ли также (как лучшая практика) тематически сильно связанные текстовые поля (например, "Имя и Фамилия" или "Адрес для выставления счета") в
<fieldset>с<legend>?
Вспомогательные тексты и поддержка ввода
- Имеют ли поля со специальными требованиями к формату видимый вспомогательный текст? [1]
- Связан ли этот вспомогательный текст с полем через
aria-describedby? [13] - Имеют ли все поля, которые запрашивают личные или известные данные (Имя, Электронная почта, Телефон, Адрес), правильный атрибут
autocomplete? [14], [15] - Используются ли атрибуты
placeholderтолько в качестве дополнения и не содержат ли они важной информации? [16] - Имеют ли все атрибуты
placeholderдостаточный контраст (минимум 4.5:1) и распознаются ли они как вспомогательный текст (например, курсивом)? [17]
Обработка ошибок
- Подавляется ли стандартная валидация браузера с помощью
novalidate? - Появляется ли при ошибке сводка ошибок в начале формы? [6]
- Имеет ли контейнер сводки
role="alert"иtabindex="-1"? [18] - Устанавливается ли фокус программно на сводку при возникновении ошибки? [6]
- Содержит ли сводка кликабельные ссылки, которые корректно переходят к соответствующему полю (или к первому элементу группы, такой как радиокнопки)? [19]
- Являются ли тексты ссылок в сводке точными и полезными (например, за счет использования
data-errorsummary-labelпри длинных текстах флажков)? - Отображается ли специфическое встроенное сообщение об ошибке для каждого некорректного поля? [20]
- Получает ли каждое некорректное поле динамически атрибут
aria-invalid="true"? [21] - Помечается ли
<label>или<legend>некорректного поля как цветом, так и текстовым префиксом (например, "Ошибка: ")? [22] - Удаляются ли все сообщения об ошибках, атрибуты
aria-invalidи состояния ошибок метки (префикс/цвет) при повторной проверке (например,resetErrors())? [20]
После отправки
Как только пользователь отправляет форму, он должен быть проинформирован о статусе процесса отправки – будь то перенаправление, сообщение об успехе или сообщение об ошибке.
Статус отправки
- Деактивируется ли кнопка "Отправить" сразу после нажатия (и успешной валидации), чтобы предотвратить двойную отправку? [23]
- Отображается ли состояние "Занято" визуально (например, "Отправляется...", спиннер)?
- Объявляется ли состояние "Занято" программно через область
aria-live(role="status")? [24]
Финальный статус (если перенаправление не происходит)
- Отображается ли сообщение об успехе или ошибке сервера в области
role="alert"? [18] - Устанавливается ли фокус клавиатуры программно на начало этого сообщения (
.focus()), как только оно появляется? - Скрывается ли форма в случае успеха, чтобы избежать путаницы?
- Содержит ли финальное статусное сообщение видимую кнопку (например, "Заполнить снова" / "Попробовать снова"), чтобы сбросить форму?
- Сбрасывается ли форма, скрывается ли статусное сообщение и снова отображается ли форма после нажатия на кнопку сброса?
- Устанавливается ли фокус программно на первое поле формы после сброса?
- Активируется ли кнопка "Отправить" снова (или остается активной) при ошибке сервера, чтобы пользователь мог повторить попытку? [23]
Заключение
Доступность форм имеет решающее значение для обеспечения того, чтобы все пользователи могли беспрепятственно взаимодействовать с Вашим веб-сайтом. Используйте этот чек-лист, чтобы проверить свои формы и убедиться, что они соответствуют лучшим практикам доступности. Для подробного объяснения и дополнительных советов я рекомендую Вам прочитать мое полное руководство по доступным формам.
Отказ от ответственности
Содержание этого чек-листа предназначено исключительно для информационных целей и не является юридической консультацией. Хотя я стремлюсь предоставлять точную и актуальную информацию, я не даю никаких гарантий относительно полноты, правильности или актуальности предоставленной информации. Соответствие стандартам доступности может варьироваться в зависимости от конкретного контекста и сценария использования. Рекомендуется обратиться за профессиональной консультацией при внедрении доступных форм и проводить регулярное тестирование с реальными пользователями, чтобы убедиться, что требования руководства WCAG 2.2 соблюдены. Я не несу ответственности за ущерб или убытки, возникшие в результате использования информации, содержащейся в этом руководстве, или доверия к ней.
Об авторе