Klare Namen für Eingabefelder. Keine Browser-Meldungen wie "Bitte ausfüllen".

Ein barrierefreies Formular hat drei Merkmale. Jedes Eingabefeld hat einen sichtbaren Namen. Fehler sind als Text sichtbar. Fehler sind mit dem Feld verbunden. Screenreader lesen Feld und Fehler zusammen vor.

Die Richtlinien WCAG 3.3.1 und 3.3.3 sind Pflicht. Formulare sind oft der Grund für Barrieren. Standard-Meldungen von Browsern sind nicht für Blinde geeignet. Ersetze diese Meldungen.

Das erste Gespräch dauert 15 Minuten. Wir prüfen, ob unsere Hilfe passt. Weitere Infos: BFSG-Übersicht, Leistungs-Übersicht, BAFA-Förderung, häufige Fragen.

WCAG 3.3.1 · Модуль WCAG

Доступные формы

Четкие обозначения, программная обработка ошибок, валидация — никаких всплывающих окон браузера, никаких просьб заполнить.

Что это такое?

Что означает "доступные формы"?

Доступная форма характеризуется тремя свойствами: (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 + JS site-pages.js.

Другие модули WCAG

Соответствующие структурные элементы нашего модульного комплекса

Все модули в обзоре BFSG →

Вам нужен именно этот модуль?

Первичная консультация (15 минут) — мы выясним, насколько она актуальна для вашего сайта.

Запишитесь на первичную консультацию

Дополнительная информация:
Обзор BFSG ·
Обзор производительности ·
Финансирование BAFA ·
Часто задаваемые вопросы