AddThisFeature

Accessible Chart Summary

Say in words what each chart shows, and let people read the numbers behind it.

involved Analytics

What it adds

A short generated description and an equivalent data table attached to every chart the app renders.

What your agent is told to do

5
  1. 1

    For each chart type in the app, define a summary template stating what is measured, over what range, and the one or two facts that matter — the overall direction, the extremes, and anything conspicuous — filled from the same data the chart draws from.

  2. 2

    Attach the summary as the chart's accessible description and render it visibly beneath or beside the chart, since a plain sentence saying what the picture shows helps every reader, not only screen reader users.

  3. 3

    Offer the underlying data as a real table reachable from the chart, sorted and formatted as the chart presents it, with units and the same rounding.

  4. 4

    Regenerate the summary and the table whenever the chart's inputs change — a filter, a date range, a comparison toggle — and make sure the visible chart and its description can never disagree.

  5. 5

    Do not describe the encoding instead of the data. A summary that says a bar chart with five bars in blue is useless; visual encoding, colour, and pattern are owned by Chart Color Tokens, and this brief owns the meaning.

Edge cases it handles

7
  • The summary must describe the trend without asserting more than the data supports — no causation, no forecast, and no calling a two-point difference a trend. Where the movement is within noise, say the values are broadly flat.
  • The data table is the real alternative and must be genuinely equivalent: proper header cells, the same units and precision as the chart, and a caption naming what it contains, not a visually hidden dump of numbers.
  • Summaries computed once at render go stale the moment a filter is applied, leaving a description of data no longer on screen; tie regeneration to the same input the chart consumes.
  • Reading every data point aloud by default is worse than saying nothing useful — a hundred-point series produces an unlistenable wall of numbers. Summarise by default and put the full detail in the table the user opts into.
  • Empty, single-point, and all-zero series need their own phrasing rather than a summary that reads as though something were plotted.
  • Missing or partial periods must be named in the summary, because an apparent decline that is really an incomplete final month is a misleading statement of fact.
  • The summary is generated text and must be localised and formatted for the user's locale, including number, date, and currency conventions.

Definition of done

8
  • Every chart in the app has a text summary exposed as its accessible description and visible on the page.
  • Every chart has an equivalent data table with proper headers, units, and a caption.
  • Summaries state direction and extremes without claiming causation or forecasting.
  • Changing a filter or range updates the summary and the table in the same pass as the chart.
  • Empty, single-point, and incomplete series produce accurate, distinct wording.
  • Full point-by-point detail is available on request and is not read by default.
  • The feature matches the existing design system.
  • No existing functionality is broken.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.