Код-ревью Senior Цвет, контраст, доступность обновлено
Ревью дашборда на доступность
Вопрос
Описан график на аналитическом дашборде. Найдите проблемы доступности и восприятия.
1. Пять линий графика различаются только цветом: красный, зелёный, оранжевый, коричневый, оливковый
2. Легенда внизу мелким текстом 10 px серым на сером
3. Значения доступны только при наведении мышью (тултип)
4. Рост показан зелёным, падение красным, без знаков и стрелок
5. Подписи осей 11 px #9CA3AF на белом
6. Для скринридера график это картинка без описания
Коротко
Доступная визуализация не полагается только на цвет, даёт текстовую альтернативу и табличные данные, не прячет значения за hover и соблюдает контраст подписей.
Что должен найти ревьюер
- Ошибкастрока 1Красный, зелёный, оранжевый, коричневый и оливковый почти неразличимы при красно-зелёных нарушениях. Нужны прямые подписи линий, разные маркеры или типы линий, проверенная палитра.
- Ошибкастрока 2Мелкая низкоконтрастная легенда далеко от линий: трудно читать и сопоставлять. Лучше подписи у концов линий.
- Ошибкастрока 3Только hover недоступен с клавиатуры и тачскрина. Нужен фокус по точкам или таблица данных.
- Ошибкастрока 4Смысл передаётся только цветом (1.4.1). Добавить знак «+» или «−» и стрелки.
- Ошибкастрока 5#9CA3AF на белом около 2.54:1, ниже 4.5:1 для текста.
- Ошибкастрока 6Нет текстовой альтернативы: нужен вывод в тексте («Выручка выросла на 12% за квартал») и доступ к таблице.
Разбор
Доступная визуализация не полагается только на цвет, даёт текстовую альтернативу и табличные данные, не прячет значения за hover и соблюдает контраст подписей.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.