Что такое доступная контактная форма?
Информация о статье
Автор: Дмитрий Дугарев
Составляющие части формы
Формы (вы знаете их как контактные формы, формы входа или оформления заказа) являются наиболее важными точками взаимодействия в Интернете. Их используют для взаимодействия с пользователями, сбора данных или регистрации.
Благодаря Европейскому акту о доступности (EAA), их доступность больше не является необязательной, а становится юридическим требованием [1]. Типичные составляющие части формы:
- Метки и поля ввода: Каждое поле (
<input>,<textarea>) требует четкой, постоянно видимой<label>. [2] - Логическая группировка: Связанные поля (например, адресные данные или радиокнопки) группируются с помощью
<fieldset>и<legend>. [3] - Вспомогательный текст и поддержка: Необязательные вспомогательные тексты (связанные через
aria-describedby) и атрибутыautocompleteоблегчают заполнение. [4] - Обработка ошибок: Надежный механизм, который выявляет ошибки, отображает их в виде сводки и направляет пользователя к исправлению. [5]
- Управление статусом: Визуальная и звуковая обратная связь при отправке (
role="status") и после завершения (role="alert"). [6]
Что делает форму доступной?
Доступная контактная форма гарантирует, что все эти функции также доступны людям, которые используют клавиатуру вместо мыши или полагаются на скринридеры. Для вас это означает:
- Четкая маркировка и структура: Взаимосвязь между метками, вспомогательными текстами, сообщениями об ошибках и полями ввода корректно отображается семантически. [3]
- Полная управляемость с помощью клавиатуры: Все поля, кнопки и ссылки доступны и управляемы с помощью клавиатуры — в логическом порядке. [7], [8]
- Надежное управление фокусом: Фокус управляется логично. В частности, при ошибках пользователь активно направляется к сводке ошибок. [9]
- Полезная поддержка ввода: Поля для известных данных (имя, электронная почта и т. д.) имеют атрибуты
autocomplete. [4] - Понятные объявления: Скринридеры могут четко сообщать о назначении каждого поля, его статусе (например, "Обязательное поле", "недействительно") и обо всех изменениях статуса (например, "Отправляется...", "Произошла ошибка"). [10], [6]
Убедитесь, что ваша форма соответствует этим критериям, чтобы создать инклюзивный, соответствующий требованиям EAA и доступный пользовательский опыт для всех посетителей вашего веб-сайта.
Здесь вы видите пример такой формы:
Ресурсы для доступных форм
Этот раздел адресован в первую очередь разработчикам, которые хотят создавать доступные цифровые продукты. Здесь мы переходим к сути: Как мне создать доступные формы, которые действительно работают — для всех групп пользователей?
Здесь вы найдете следующие ресурсы:
- Пошаговая инструкция по реализации доступной контактной формы
- Исчерпывающий чек-лист для аудита доступности форм
Для каждой рекомендации я объясняю почему она важна, показываю что можно и чего нельзя делать на практике и предоставляю конкретные примеры кода. Кроме того, они снабжены ссылками на соответствующие критерии WCAG [11] и паттерны WAI-ARIA [12], чтобы вы могли легко понять требования.
Просто начните с пошаговой инструкции, чтобы создать прочную основу. Используйте чек-лист, чтобы убедиться, что ваша форма соответствует всем важным требованиям доступности.
Желаю успехов в реализации доступных форм! Если у вас есть вопросы или вы хотите оставить отзыв, свяжитесь со мной.
Об авторе