Практические руководства

Сделать диаграммы и таблицы веб-сайтов понятными

Диаграмма помогает сравнить только тогда, когда читатели могут восстанавливать свои оси, значения и различия. Легенда не может нести все объяснение.

См. метод

Два человека, сравнивающие печатную диаграмму с барами данных на ноутбуке

Начните с вопроса, на который отвечают данные

Укажите вопрос или решение перед тем, как сделать вывод. Вы сравниваете тенденцию, дистрибутив или несколько точных значений? Выберите форму, которая показывает отношения, и используйте таблицу, когда каждое число имеет больше, чем общая форма.

Покажите объем, единицы измерения, период и источник вблизи рисунка. Процент без знаменателя или неожиданно усеченной оси может ввести в заблуждение. Руководство по измерению Помогает интерпретировать индикаторы перед публикацией.

  • вопрос и единица явной.
  • источник и период видимы.
  • Диаграмма выбрана для отношений.

Объясните содержание вне изображения

Дайте наглядному варианту краткую альтернативу, идентифицирующую его предмет. Для сложной диаграммы добавьте длинное описание, видимое каждому, или таблицу значений. Объясните тенденции, пробелы и исключения, необходимые для понимания вывода.

Советы W3C по сложным изображениям Различают краткое описание и подробную информацию. Последовательность значений в атрибуте ALT становится болезненной для прослушивания; Структура HTML может лучше служить чтению.

  • тема названа в альтернативе.
  • ценности и тенденции, доступные в виде текста.
  • Длинное описание структурировано там, где это необходимо.

Тестировать цвета, весы и экраны

Не полагайтесь только на цвет, чтобы различать серию. Добавьте ярлыки, узоры или маркеры и проверьте контрастность. На телефоне проверьте оси и значения, не требуя постоянного горизонтального зума.

Таблица требует заголовков, связанных с ячейками, даже если макет сужается. Если мобильная диаграмма упрощена, не удаляйте существенную серию. Руководство по доступности Предлагает проверки клавиатуры и масштабирования.

  • Серия четкая без цвета.
  • Оси читаются на мобильных устройствах.
  • Заголовки таблицы понятны.

Проверяйте числа с течением времени

Назовите источник, дату сбора, метод и владельца. Когда данные меняются, проверьте название, заключение, таблицу и переводы. Изображение диаграммы может оставаться в статье после исправления базовых данных.

Просмотрите также все загрузки: формат повторного использования, имена столбцов и отсутствие данных, которые не должны быть общедоступными. Четкая цифра не может выкупить ошибочный расчет; Пересмотрите значения перед выпуском.

  • Пересмотрен источник и расчет.
  • Обновлены копии и переводы.
  • Загрузки проверены.

Контент обновлен 2 октября 2026 г.

Матрица функциональной проверки для адаптации к проекту

Эти предлагаемые средства контроля используют фиктивные случаи. Решите, какое поведение ожидается в команде, запишите результат и назначьте неразрешенные расхождения перед публикацией.

Тестовые случаи, ожидаемые результаты и полезные доказательства
КейсОжидаемый результатДоказательство для сохранения
Серия содержит отсутствующее значение.Разрыв идентифицируется, а не наносится на нуль.Запишите URL-адрес, шаги, результат и датированные доказательства.

Часто задаваемые вопросы

Как диаграммы могут показывать ограничения данных?

Состояние источник, период, единицы измерения, объем и отсутствующие значения. Объясните поддерживаемые выводы и предоставьте подходящую текстовую или табличную альтернативу. Не превращайте неизвестные значения в ноль. Проверьте контраст, ярлыки и понимание без цветовых различий.