Статус, понятный без одного только цвета
Состояние записи лучше передавать текстом и дополнительным оформлением, чтобы различие не зависело только от восприятия цвета.
Назначение
Состояние записи лучше передавать текстом и дополнительным оформлением, чтобы различие не зависело только от восприятия цвета.
Как это работает
Метка может сочетать слово, форму рамки и фон. Декоративный значок при этом не должен дублировать озвучивание слова. Для динамических изменений отдельно выбирают уместный способ объявления.
Пример
<style>.status{display:inline-block;padding:6px 10px;border:1px solid;border-radius:6px}.ready{background:#eaf4ee;color:#164b35}.draft{background:#fff4d8;color:#604300}</style>
<p><span class="status ready">Готово к чтению</span></p><p><span class="status draft">Черновик</span></p>Что должно получиться
Статусы различаются словами и сохраняют смысл без фонового цвета. Это статическая разметка, поэтому автоматическое голосовое уведомление здесь не требуется.
Граница применения и частая ошибка
Зелёная и красная точки без подписей не объясняют смысл одинаково всем читателям. Не добавляйте role=alert ко всем статическим статусам: лишние объявления мешают работе.
Самостоятельная проверка
Посмотрите компонент в оттенках серого и без CSS. Оба состояния должны оставаться различимыми по словам; затем проверьте контраст текста на каждом фоне.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.