Practical guides

Make website charts and tables understandable

A chart helps comparison only when readers can recover its axes, values and differences. The legend cannot carry the entire explanation.

Go to the method

Illustration of website project planning: Make website charts and tables understandable
Illustration

Start with the question the data answers

State the question or decision before drawing. Are you comparing a trend, distribution or a few exact values? Choose a form that reveals the relationship, and use a table when every number matters more than the overall shape.

Show scope, units, period and source near the figure. A percentage without its denominator or an unexpectedly truncated axis can mislead. The measurement guide helps interpret indicators before publishing.

  • Question and unit explicit.
  • Source and period visible.
  • Chart chosen for the relationship.

Explain the content outside the image

Give the visual a short alternative identifying its subject. For a complex chart, add a long description visible to everyone or a table of values. Explain trends, gaps and exceptions needed to understand the conclusion.

W3C advice on complex images distinguishes short identification from detailed information. A long string of values in an alt attribute is difficult to hear; structured HTML may serve readers better.

  • Subject named in the alternative.
  • Values and trends available as text.
  • Long description structured where needed.

Test colours, scales and screens

Do not rely on colour alone to distinguish series. Add labels, patterns or markers and check contrast. On a phone, verify axes and values without demanding constant horizontal zoom.

A table needs headers associated with cells even when the layout narrows. If a mobile chart is simplified, do not remove an essential series. The accessibility guide suggests keyboard and zoom checks.

  • Series distinct without colour.
  • Axes readable on mobile.
  • Table headers understandable.

Verify numbers over time

Name the source, collection date, method and owner. When data changes, check title, conclusion, table and translations. A chart image may remain in an article after the underlying data is corrected.

Review any downloads too: reusable format, column names and absence of data that should not be public. A clear figure cannot redeem a faulty calculation; have values reviewed before release.

  • Source and calculation reviewed.
  • Copies and translations updated.
  • Downloads checked.

Content updated on October 7, 2026

Acceptance matrix to adapt to your project

These proposed checks use synthetic cases. Decide the required behaviour with the team, record the result and assign unresolved gaps before release.

Scroll the table horizontally to read every column. With a keyboard, focus the table area and use the arrow keys.

Test cases, expected outcomes and useful evidence
CaseExpected outcomeEvidence to retain
A series contains a missing value.The gap is identified rather than plotted as zero.Record URL, steps, result and dated evidence.

Frequently asked questions

How can charts show data limitations?

State source, period, units, scope and missing values. Explain supported conclusions and provide a suitable textual or tabular alternative. Do not turn unknown values into zero. Check contrast, labels and understanding without colour distinctions.