В прошлом году я провела аудит доступности на 200 дашбордах с данными. Результаты отрезвили: у 94% была как минимум одна критическая проблема доступности.
Самая частая проблема? Кодирование только цветом. Диаграммы, совершенно нечитаемые для 300 миллионов людей во всём мире с дефицитом цветового зрения.
Давайте это исправим.
Почему важна доступность диаграмм
Помимо этического императива, есть и бизнес-аргумент:
- 15% мирового населения имеет ту или иную форму инвалидности
- Дальтонизм затрагивает 8% мужчин и 0,5% женщин
- Доступный дизайн часто улучшает юзабилити для всех
И всё чаще это закон. Соответствие WCAG требуется для государственных сайтов и многих предприятий.
Четыре столпа доступности диаграмм
1. Независимость от цвета
Правило: Никогда не используйте цвет как единственный способ передачи информации.
Плохо: Линейная диаграмма с красным для "продажи" и зелёным для "прибыль" без других различий.
Хорошо: Та же диаграмма, но у продаж сплошная линия, а у прибыли пунктирная. Или разные формы маркеров. Или прямые подписи.
Практические исправления:
- Добавьте узоры или текстуры к залитым областям
- Используйте разные стили линий (сплошная, пунктирная, точечная)
- Включите прямые подписи на точках данных
- Используйте формы для точек на диаграмме рассеяния
- Добавьте четкую легенду, которая не полагается на сопоставление цветов
Советы по цветовой палитре:
- Используйте безопасную для дальтоников палитру (помогают такие инструменты, как ColorBrewer)
- Обеспечьте достаточный контраст между соседними цветами
- Протестируйте с симулятором дальтонизма (в Chrome DevTools есть такой)
2. Поддержка скринридеров
Диаграммы по своей природе визуальны. Чтобы они работали со скринридерами, требуется осознанное усилие.
Необходимые элементы:
- Alt-текст, который описывает ключевое сообщение диаграммы, а не только её структуру
- Таблицы данных как альтернативное представление
- Правильная иерархия заголовков вокруг диаграммы
- ARIA-метки для интерактивных элементов
Написание хорошего alt-текста:
Плохо: "Столбчатая диаграмма, показывающая данные о продажах"
Хорошо: "Столбчатая диаграмма, показывающая продажи за 3 квартал 2025 года по регионам. Западный регион лидирует с $2,3 млн, за ним следует Восточный с $1,8 млн, Центральный с $1,4 млн и Южный с $0,9 млн."
Alt-текст должен отвечать: Что кому-то нужно знать, если он не может видеть эту диаграмму?
Для сложных диаграмм предоставьте альтернативу в виде таблицы данных. Оберните изображение диаграммы в элемент figure с описательным alt-текстом и включите сворачиваемый раздел details, содержащий таблицу исходных данных.
3. Навигация с клавиатуры
Интерактивные диаграммы должны быть доступны с клавиатуры.
Требования:
- Все интерактивные элементы доступны через Tab
- Чёткие индикаторы фокуса
- Логический порядок табуляции
- Горячие клавиши для распространённых действий (с документацией)
Для сложных интерактивных дашбордов:
- Предоставьте способ пропустить диаграмму
- Позвольте пользователям клавиатуры получать ту же информацию, что и пользователи мыши
- Включите способ приостановить любые автоматически обновляющиеся данные
Тестирование: Отключите мышь и попробуйте использовать вашу диаграмму. Можете ли вы получить доступ ко всей информации?
4. Когнитивная доступность
Не все проблемы доступности связаны с сенсорными нарушениями. Когнитивная нагрузка тоже имеет значение.
Рекомендации:
- Держите диаграммы простыми; одно основное сообщение на диаграмму
- Избегайте жаргона в подписях и аннотациях
- Используйте согласованное форматирование на всём дашборде
- Предоставляйте контекст и объяснения
- Избегайте автоматически воспроизводимых анимаций
5-секундный тест: Может ли кто-то понять основную мысль вашей диаграммы за 5 секунд? Если нет, упростите.
Распространенные типы диаграмм и их проблемы
Круговые диаграммы
- Проблема: Сегменты, различаемые только цветом
- Исправление: Добавьте узоры, подписи непосредственно на сегменты или четкую легенду со значениями
Линейные диаграммы
- Проблема: Несколько линий, различаемых только цветом
- Исправление: Разные стили линий, прямые подписи или интерактивные состояния при наведении
Столбчатые диаграммы
- Проблема: Низкий контраст между столбцами и фоном
- Исправление: Обеспечьте минимальный коэффициент контрастности 3:1, добавьте границы к столбцам
Теплокарты
- Проблема: Цветовые градиенты бессмысленны без зрения
- Исправление: Добавьте числовые значения в ячейки, предоставьте альтернативу в виде таблицы данных
Диаграммы рассеяния
- Проблема: Перекрывающиеся точки, категории, определяемые только цветом
- Исправление: Разные формы маркеров, регулируемая непрозрачность, таблица данных
Тестирование ваших диаграмм
Автоматизированное тестирование
- axe DevTools для общей доступности
- WAVE для быстрой визуальной проверки
- Аудит доступности Lighthouse
Ручное тестирование
- Симуляторы дальтонизма (Sim Daltonism, Chrome DevTools)
- Тестирование со скринридерами (NVDA, VoiceOver, JAWS)
- Навигация только с клавиатуры
- Увеличение до 200% (всё ещё работает ли диаграмма?)
Пользовательское тестирование
- Включите людей с инвалидностью в ваше пользовательское исследование
- Не предполагайте; спрашивайте о реальных болевых точках
Быстрые победы, которые можно внедрить уже сегодня
- Добавьте alt-текст к каждой диаграмме (опишите инсайт, а не только тип)
- Включите альтернативу в виде таблицы данных
- Проверьте цветовой контраст (минимум 3:1 для графики)
- Протестируйте с симулятором дальтонизма
- Убедитесь, что навигация с клавиатуры работает
- Добавьте видимые индикаторы фокуса
Инструменты, которые помогают
ChartGen и другие современные инструменты начинают включать функции доступности по умолчанию. Ищите:
- Встроенные предложения alt-текста
- Опции палитр, безопасных для дальтоников
- Автоматические наложения узоров
- Генерацию таблиц данных
Но инструменты — не магия. Вам всё равно нужно проверять и адаптировать под ваш конкретный контекст.
Бизнес-эффект
Друг-консультант по доступности поделился этой историей: Финансовая компания исправила проблемы доступности в своём дашборде для инвесторов. Результат? Увеличение вовлечённости на 23% от всех пользователей, а не только от тех, у кого есть инвалидность.
Доступный дизайн обычно просто лучший дизайн.
Ресурсы
- Руководства WCAG 2.1 (конкретно 1.4.1 Использование цвета и 1.1.1 Не-текстовый контент)
- Проект Chartability для рекомендаций по диаграммам
- A11y Style Guide для паттернов компонентов
- Инструменты симуляции дальтонизма
Финальная мысль
Вы не стали бы строить здание без пандуса. Зачем строить дашборд без доступности?
Усилия по обеспечению доступности диаграмм скромны. Эффект значителен. Начните с одной диаграммы, примените эти принципы и развивайтесь оттуда.