Добавьте к каждому состоянию второй видимый сигнал
Критерий WCAG 2.2 1.4.1 запрещает использовать цвет как единственный визуальный способ передать информацию, обозначить действие, запросить ответ или различить элемент. Поэтому ошибку формы нельзя выражать только красной рамкой. Добавьте точное сообщение, значок с доступным текстовым смыслом или ещё один устойчивый визуальный признак. То же правило относится к успеху, предупреждению, выбору, обязательности и изменённым значениям.
- Дополняйте цвет ошибки конкретным текстом «Введите корректный адрес электронной почты», а не общей красной обводкой.
- Дополняйте цвет успеха подтверждением, в котором названо завершённое действие или успешно заполненное поле.
- Дополняйте цвет предупреждения подписью или значком и объясняйте, можно ли безопасно продолжить.
Разделяйте подпись, инструкцию и сообщение проверки
Постоянная подпись сообщает, какие данные собирает элемент; инструкция объясняет ожидаемый формат; сообщение проверки говорит, что именно исправить. Не объединяйте эти роли в placeholder или цветную звёздочку. WCAG требует подписи либо инструкции, когда содержимое ожидает пользовательский ввод, а обнаруженная ошибка должна быть описана текстом. Размещайте сообщение рядом с полем, связывайте его программно и сохраняйте введённое значение, если исправление возможно.
- Используйте видимую подпись, которая остаётся после ввода, вместо зависимости от исчезающего placeholder.
- Сообщайте ограничения заранее: например, требуемый формат даты или минимальную длину пароля.
- После проверки называйте проблемное поле и способ исправления, не раскрывая чувствительные введённые данные.
Проверяйте текст и границы компонентов отдельно
Контраст текста и нетекстовый контраст — разные проверки. По WCAG 2.2 обычному тексту, как правило, нужен коэффициент не ниже 4,5:1, а подходящему крупному тексту — не ниже 3:1. Визуальная информация, необходимая для распознавания компонентов интерфейса и их состояний, обычно требует 3:1 относительно соседних цветов. Сначала измерьте сообщение на его фоне, затем отдельно рамку поля, выбранный индикатор, отметку ошибки и индикатор фокуса.
- Измеряйте вспомогательный текст и текст ошибки самостоятельно: контрастная рамка не исправляет бледные слова.
- Проверяйте обязательную границу поля относительно соседней поверхности, если граница помогает распознать элемент.
- Сравнивайте значки, галочки и отметки состояния с цветами непосредственно рядом, а не с посторонним фоном страницы.
Сохраняйте видимый фокус во всех состояниях
Клавиатурный фокус не равен hover, выбору или результату валидации. Поле с ошибкой в фокусе должно одновременно показывать два факта: куда попадёт клавиатурный ввод и почему текущее значение неверно. Оставляйте отдельный индикатор фокуса, а не заменяйте его рамкой ошибки. Проверяйте его на обычном фоне, при ошибке, предупреждении и успехе, а также рядом с disabled-элементами. Избегайте сдвига макета при изменении толщины рамок.
- Используйте фокус с достаточной площадью и контрастом для требований WCAG, которые выбраны в проекте.
- Сохраняйте фокус видимым поверх рамки ошибки, заливки или состояния выбора.
- Проверяйте порядок и видимость с клавиатуры при масштабировании, высокой контрастности и на узком экране.
Считайте disabled решением о поведении
На неактивные элементы не распространяется часть требований WCAG к контрасту, однако один лишь бледный цвет плохо объясняет причину недоступности. Неактивная кнопка отправки может скрыть незаполненные условия. Когда возможно, оставьте действие доступным и покажите проверку после нажатия; когда блокировка необходима, сохраняйте читаемую подпись, корректно запрещайте взаимодействие и объясняйте условие рядом. Не отличайте disabled от enabled только цветом.
- Применяйте нативный disabled только тогда, когда элемент действительно нельзя использовать в текущем контексте.
- Объясняйте предварительное условие, например принятие правил или заполнение обязательного поля, до недоступного действия.
- Не имитируйте блокировку одним серым стилем: клавиатура, указатель и семантика доступности должны совпадать.
Проверяйте весь путь валидации
Проверки палитры недостаточно без взаимодействия. Пройдите нетронутую форму, клавиатурный фокус, корректный и ошибочный ввод, отправку, отказ сервера, исправление и успех. В длинной форме добавьте сводку нескольких ошибок, но сохраните сообщения возле полей. Перемещайте фокус только тогда, когда это помогает понять результат. Убедитесь, что live-объявления краткие и не повторяются на каждом символе. Документируйте цвета, пары контраста, текст, значки и программные связи вместе.
- Проверяйте каждое состояние клавиатурой, масштабированием, скринридером и хотя бы одним режимом forced colors.
- Записывайте точные пары переднего плана и фона, чтобы изменения токенов можно было повторно измерить.
- Отдельно тестируйте асинхронные и серверные ошибки: они часто обходят стили и семантику клиентской проверки.
Первоисточники
Фактические утверждения статьи проверены по этим опубликованным спецификациям.