Цвет помогает заметить статус, но не должен быть единственным способом его понять. Зелёный и красный кружки без подписи могут быть неразличимы для части посетителей и непонятны для остальных. Добавьте текст, который сообщает состояние и следующий шаг.
Назовите реальное состояние
В учебном каталоге вымышленной мастерской товар бывает доступен, временно отсутствует или производится после согласования. Подписи «В наличии», «Нет в наличии» и «Уточнить изготовление» различают эти ситуации. Не используйте одну зелёную точку для всех вариантов положительного ожидания.
Для формы «Сообщение отправлено» отличается от «Заявка принята в работу». Второе утверждение требует реального процесса обработки. Для записи «Ожидает подтверждения» не равно «Подтверждено».
Добавьте видимое пояснение
- Найдите статусы, передаваемые только цветом или иконкой.
- Составьте список фактических состояний и их точные короткие названия.
- В «Контенте» соответствующего блока добавьте подпись рядом со знаком или замените знак текстом.
- Если состояние меняется динамически, согласуйте текст с его реальным источником, а не рисуйте постоянную надпись.
- Опубликуйте страницу и сравните отображение с фактическими данными.
На собственной статичной учебной вставке можно показать состояние так:
<p class="pp-status-demo">
<span aria-hidden="true">●</span> Нет в наличии
</p>Кружок здесь декоративный, смысл передаёт текст. Код не связан с каталогом Tilda и не обновляет наличие автоматически. Для настоящего магазина статус должен приходить из актуального товара и его вариантов.
Проверьте контраст и различимость
Сравните текст с фоном, включая фон фотографии и затемнённую карточку. Нежный оттенок может быть пригоден для украшения, но плохо читаться в маленьком размере. Контраст проверяют по реальным значениям цвета, а не по впечатлению в редакторе.
Просмотрите макет без опоры на цвет: по подписям должно быть понятно, что доступно и что делать дальше. У ошибки дополнительно укажите способ исправления. У отсутствующего товара полезен актуальный дальнейший маршрут, если он действительно предусмотрен.
Приёмка на разных экранах
На телефоне длинная подпись не должна обрезаться фиксированной высотой. При увеличении текста состояние остаётся читаемым. Для интерактивных переключателей проверьте, что текущий выбор понятен также клавиатурой и вспомогательной технологией.
Для динамического результата собственной формы одного изменения текста может быть недостаточно для уведомления скринридера: разработчик должен проверить соответствующий способ объявления состояния. Не добавляйте произвольное aria-live ко всем блокам, создавая постоянные лишние сообщения.
- Надпись расходится с наличием: исправьте источник данных или уберите ручной дубль.
- Состояния отличаются только оттенком: добавьте текстовое различие.
- Иконка озвучивается лишний раз: проверьте её декоративную роль.
Дополнительно разберите тексты ошибок и названия иконок. Для самостоятельного обучения изучите актуальные программы и условия в разделе курсов Perkova&Perkova.