Writing Chart Summaries and Key Takeaways

A chart summary is one to three sentences that say what a chart shows and why it matters: “Revenue grew 18% in 2025, with most growth after the March launch. October was the peak month at 1.4 million.” It is the most useful text alternative for most readers — screen reader users, people skimming, people who struggle with charts — and it is often missing or reduced to “Chart showing revenue over time”. Writing good summaries is a skill teams can learn with a few patterns.

This guide belongs to data visualization chart alternatives.

Spec reference

SC 1.1.1 Non-text Content (A) — a text alternative serving the equivalent purpose; for charts, the key information.
SC 1.3.1 (A) — summary associated with the chart (aria-describedby or figcaption).
WAI Images tutorial: complex images — short description plus long description or data.
Plain language — summaries benefit cognitive accessibility.

Message first, numbers second, context third.

When to use — and when not to

Write a summary for every chart that conveys information. Dashboards benefit as much as reports; a one-line summary under each widget helps everyone.

Do not describe the chart’s appearance (“a blue line rising to the right”) instead of its meaning. The misapplication: listing every value in the summary, which belongs in a data table.

Annotated code example

<figure>
  <svg viewBox="0 0 20 20" role="img" aria-labelledby="t1" aria-describedby="s1">…</svg>
  <figcaption>
    <span id="t1"><strong>Monthly revenue, 2025</strong></span>
    <span id="s1">Revenue grew 18% over the year, with most of the growth after the March launch.
      October was the peak at 1.4 million.</span>
  </figcaption>
</figure>

// Template for a generated trend summary
function trendSummary({ name, period, start, end, peak }) {
  const change = (end.value - start.value) / start.value;
  const dir = change > 0.02 ? 'rose' : change < -0.02 ? 'fell' : 'stayed roughly flat';
  return `${name} ${dir}${Math.abs(change) > 0.02 ? ` ${pct(Math.abs(change))}` : ''} over ${period}. ` +
         `The highest value was ${fmt(peak.value)} in ${peak.label}.`;
}

Keyboard & AT behaviour

Placement	Screen reader experience
figcaption	Read with figure; reachable in browse mode
aria-describedby on SVG	Read after the chart name
Paragraph before chart	Read first; good for dashboards
Hidden summary only	Sighted users miss it; avoid
Tooltip-only summary	Not discoverable; avoid

Match the summary to the purpose.

Step-by-step implementation

Ask what the chart is for. If you cannot state it in a sentence, the chart may not need to exist.
Lead with the message. Use plain verbs (rose, fell, doubled, led) and the key number.
Add context. One sentence on when, why or how unusual.
Place it visibly. Under or above the chart in a caption; link it with aria-describedby if the chart has its own name.
Template where data changes. For live dashboards, generate summaries from rules (trend, max, min) and keep wording consistent.

Integration context

Naming charts is covered in naming charts and figures with figcaption. Longer descriptions are in long descriptions for complex charts, generated alternatives in generating accessible text alternatives for D3 charts, and data tables in show-as-table toggles for charts.

Gotchas

Generated summaries that state the obvious. “The highest value was in the last month” may be true but uninteresting; templates should prefer notable changes.

Precision. Round numbers in summaries (“1.4 million”) and leave exact values to tables.

Bias. Summaries interpret data; keep them factual and avoid claims the chart does not support.

Edge cases

No clear message. Exploratory charts may not have one; summarise the range and notable features instead.
Multiple series. Summarise the comparison (“North grew fastest; South declined”).
Uncertain data. Mention confidence intervals or data quality briefly.

Worked example

A government statistics site published hundreds of charts with alt text like “Bar chart”. Screen reader users had to open data tables to get any meaning. Editors adopted a summary template — message, key numbers, context — and added summaries to figcaptions. Generated charts got rule-based summaries. User testing showed screen reader users understood the main point of each chart in seconds, and sighted users read the summaries too.

Common mistakes

Describing appearance instead of meaning.
Listing every value.
Hiding summaries from sighted users.
No numbers in the summary.

Testing checklist

Every informative chart has a one- to three-sentence summary.
The summary leads with the main message and key numbers.
It is visible and programmatically linked.
Generated summaries use consistent templates.
Exact values are in a table, not the summary.

With NVDA, navigate a report by graphics (G) and listen to each chart’s name and summary. Ask: could you answer the question the chart was made for from the summary alone? If not, revise it. Check that summaries are read once and that the data table link follows. In VoiceOver, confirm figcaptions are read with figures.

Reviewing summaries with readers

Summaries are writing, and writing improves with readers. In content reviews, read only the summary to someone who has not seen the chart and ask them what they learned; compare it to what the chart’s author intended. Include screen reader users in at least some reviews. Keep a small library of good summaries for each chart type as examples for authors, and update templates when reviewers spot recurring weaknesses.

Example summaries by chart type

Trend. “Support tickets fell 32% between January and June 2025, from 4,100 to 2,790 a month. The steepest drop followed the help-centre redesign in March.”

Comparison. “The North region sold the most in 2025 at 3.2 million, nearly twice the West region’s 1.7 million. The other three regions were within 10% of each other.”

Part-to-whole. “Card payments made up 64% of transactions. Bank transfers were 22%, and the remaining 14% was split across four other methods.”

Distribution. “Most deliveries arrived within two days; the median was 1.6 days. A small group of about 3% took more than a week, all to remote postcodes.”

Correlation. “Stores with more staff hours had higher customer ratings, a moderate positive relationship. The pattern does not show which causes which.”

Each example names the subject, gives the key numbers and adds one piece of context. Use them as starting points, and adjust the verbs to the data rather than forcing every chart into the same mould.

Key points

Message first, then numbers, then context.
One to three sentences, visible to everyone.
Exact values belong in the data table.

Updating summaries

Summaries go stale when data changes. For static reports, review summaries whenever a chart is regenerated. For live charts, generate them and include the period they describe, so a summary never claims a trend the current data no longer shows.

Design system notes

Make the summary a required prop on chart components and provide summary templates for common chart purposes.

FAQ

How long should a summary be?

One to three sentences.

Should it repeat the title?

No; the title names, the summary explains.

Can summaries be generated automatically?

Yes, with templates, reviewed for quality.

Where should it appear?

Visibly near the chart, usually in the caption.

Is a summary enough?

Pair it with a data table for exact values.

What about dashboards?

A one-line summary per widget helps everyone.

Long descriptions for complex charts — more detail
Naming charts and figures with figcaption — names
Show-as-table toggles for charts — exact values

← Back to Data Visualization & Chart Alternatives