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

Two people comparing a printed chart with data bars on a laptop

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

  • 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

  • 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.