Доступные формы
Четкие обозначения, программная обработка ошибок, валидация — никаких всплывающих окон браузера, никаких просьб заполнить.
Что означает "доступные формы"?
Доступная форма характеризуется тремя свойствами: (1) каждое поле имеет видимый, программно назначенный ; (2) Сообщения об ошибках отображаются в виде обычного текста, а не в виде всплывающего окна браузера; (3) Ошибки связаны с полем (aria-describedby, aria-invalid), чтобы программа чтения с экрана могла одновременно озвучить поле и сообщение об ошибке.
Обязательства и выгоды — WCAG 3.3.1.
WCAG 3.3.1 (Идентификация ошибок) + 3.3.3 (Предложение по устранению ошибки) Обязательным условием является уровень доступности A/AA. Формы являются наиболее частой точкой конверсии и одновременно наиболее частым местом, где доступность нарушается. Стандартные всплывающие подсказки браузера („Пожалуйста, введите свой адрес электронной почты") не являются ни семантическими, ни совместимыми с программами чтения с экрана — их необходимо заменить.
Как именно мы это решим.
- Каждое поле:
Видимые объекты, а не просто заполнители. - Встроенная проверка с помощью
неверный-Событие перехвачено, собственное встроенное сообщение в<span class="field-error">. aria-describedbyсвязанное поле с диапазоном ошибок,aria-invalid="true""устанавливает статус.- Четко отображаемые подсказки перед вводом — никаких неожиданностей („телефон с кодом города, без пробелов").
- Кнопка «Отправить» доступна с клавиатуры; в случае ошибки, сосредоточьтесь на первом некорректном поле.
- Работает в плагине DigElite:
SP_Requests- Модуль Form + JSsite-pages.js.
Соответствующие структурные элементы нашего модульного комплекса
-
Контрастность AAA, проверенная по каждому компоненту.
WCAG 1.4.6Соотношение сторон текста ≥ 7:1, крупного шрифта ≥ 4,5:1 — тестирование проводилось для каждого компонента, а не для каждой страницы отдельно.
-
Простой язык (с поддержкой ИИ)
WCAG 3.1.5Упрощенный контент одним нажатием кнопки — для людей с трудностями при чтении, изучающих языки и тех, кто спешит.
-
Контрастный сканер с автоматической проверкой
WCAG 1.4.3Постоянная проверка контрастности в бэкэнде — о регрессиях сообщается до того, как редакционная группа что-либо заметит.
-
Руководитель отдела гигиены и организации пространства.
WCAG 1.3.1Четкий формат, удобный для программ чтения с экрана и поисковых систем — один заголовок H1 на странице, без переходов между строками.
Вам нужен именно этот модуль?
Первичная консультация (15 минут) — мы выясним, насколько она актуальна для вашего сайта.
Запишитесь на первичную консультацию
Дополнительная информация:
Обзор BFSG ·
Обзор производительности ·
Финансирование BAFA ·
Часто задаваемые вопросы
