Choose one comparison question first

Our original teaching example uses three sample groups, A, B and C, with values of 12, 18 and 15 units. They do not describe a company’s capacity or a client outcome. Simple bars can answer which group has the highest value. Change over time would require a different data structure. Rather than asking one chart to communicate a trend, distribution, ranking and total simultaneously, put the main decision question into its heading.

Keep units and conditions visible

A heading such as “Performance” does not explain what was measured. Put the unit, measurement period, scope and relevant test conditions close to the chart. Do not treat numbers obtained under different conditions as a directly comparable pair. Ask the technical team to approve product data and leave unknown values unresolved rather than inventing them. The cover illustration deliberately uses sample units so that its educational numbers are not mistaken for verified commercial performance.

Add a limited interpretation

Do not make the visitor reconstruct every relationship unaided. A statement such as “B has the highest value in this sample” describes what the example actually shows. It does not establish quality, profitability or customer satisfaction, because those were not measured. Keep the interpretation within the evidence. With only a few values, a compact list beside the chart may be enough. Start with a simple presentation that supports comparison before adding decorative dimensions or elaborate effects.

Make the information available beyond the image

The W3C complex images tutorial discusses a short description together with a detailed text alternative for essential information. In practice, a nearby explanation and, when needed, a data table can support the chart. Rather than squeezing the whole dataset into brief alternative text, explain where the fuller information is available. Our alt-text guide covers the purpose of that short description; this article addresses several values and relationships presented together.

Preserve the comparison when colour disappears

Colour alone can make series difficult to distinguish in a monochrome printout or under reduced visibility. Try placing labels directly beside the relevant line or bar. On mobile, consider a simpler arrangement or readable values rather than shrinking every label. Information shown on hover also needs a usable route for touch and keyboard users. Check a screenshot, a printed view and a real phone against the same question to see whether the explanation survives those conditions.

Assign ownership of publication and updates

For each chart, retain the data file, source, review date, approval owner and next review point. Avoid making old data appear automatically current. During testing, ask someone what the number measures, which period it covers and which value is highest. If those answers are missing, improve the explanation before adding animation. Our comparison-table guide and website design service can help place the chart within the wider page. Accuracy and a clear reading path are practical acceptance criteria.

Frequently asked questions

Is a table an inferior replacement for a chart?

No. When finding exact values is the priority, a table or compact list may serve the task better.

Can teaching numbers be presented as project results?

No. Label illustrative data clearly and never describe it as measured company performance or a client outcome.

Sources & further reading

W3C WAI — Complex Images
Web design & developmentLet’s discuss this service