<!-- llms-explorer concept facts · https://llms-explorer.com/tree/visual-writing/ · pack 2026-09-08 · ~3579 tokens -->

# Visual Writing

> Reference for the words that ship with images, charts, and infographics: alt text, captions, chart titles, axis labels, and annotations. The image is half the message. This skill is the other half.

Parent: [Writing and Documentation](https://llms-explorer.com/tree/writing-and-documentation/) · 14 facets · 57 facts · page: https://llms-explorer.com/tree/visual-writing/

## Visual Writing

- Reference for the words that ship with images, charts, and infographics: alt text, captions, chart titles, axis labels, and annotations. The image is half the message. This skill is the other half. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#visual-writing)

## The one rule: visual writing makes images legible without the image

- Every other rule in this skill follows from one premise: a reader who cannot see the image must still receive the load-bearing information. That reader may be a blind user with a screen reader, a sighted user on a slow network, a sighted user skimming for the chart's takeaway, or a search engine indexing the page. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#the-one-rule-visual-writing-makes-images-legible-without-the-image)
  - The alt text serves the screen reader. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#the-one-rule-visual-writing-makes-images-legible-without-the-image)
  - The caption serves the skimmer. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#the-one-rule-visual-writing-makes-images-legible-without-the-image)
  - The chart title serves the takeaway. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#the-one-rule-visual-writing-makes-images-legible-without-the-image)
  - The annotation serves the trend. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#the-one-rule-visual-writing-makes-images-legible-without-the-image)
- They are four jobs, not one. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#the-one-rule-visual-writing-makes-images-legible-without-the-image)

## Core concept 1 — The alt-text triple

- Alt text answers three questions: — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-1-the-alt-text-triple)
  - What's there? - concrete, observable content — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-1-the-alt-text-triple)
  - Why is it there? - the function the image serves in the page — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-1-the-alt-text-triple)
  - What does it show? - the specific information a sighted reader gets — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-1-the-alt-text-triple)

## Core concept 3 — Caption vs alt text vs long description

  - Alt text is for users who cannot see the image. It lives in alt="". Typically 5 to 15 words. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-3-caption-vs-alt-text-vs-long-description)
  - Caption is visible to everyone. It lives in <figcaption>. Adds context, attribution. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-3-caption-vs-alt-text-vs-long-description)
  - Long description is a structured prose alternative for complex images. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-3-caption-vs-alt-text-vs-long-description)
- Anti-pattern: duplication. If alt="Sales rose 18% in Q4" and the caption reads the same, the screen-reader user hears it twice. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-3-caption-vs-alt-text-vs-long-description)

## Core concept 4 — Tufte's principles

- Above all else, show the data. Title and labels exist to disclose the data. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-4-tuftes-principles)
- Maximize the data-ink ratio. Erase ink that doesn't carry data. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-4-tuftes-principles)
- Erase redundant data-ink. A bar chart with a legend, title, axis labels, and a redundant data table embeds the same fact four times. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-4-tuftes-principles)
- Reject chartjunk. Heavy gridlines, moiré fills, 3-D effects, drop shadows. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-4-tuftes-principles)
- Use sparklines for in-line trend. Caption a sparkline like a word - usually with just the latest value. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-4-tuftes-principles)

## Core concept 5 — The Knaflic "action title" rule

- The chart title states the takeaway. The axis labels confirm it. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-5-the-knaflic-action-title-rule)
- Generic title (descriptive only): > Quarterly Revenue, 2023–2024 — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-5-the-knaflic-action-title-rule)
- Action title (takeaway-bearing): > Q4 2024 revenue exceeded plan by 18% - the strongest quarter on record — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-5-the-knaflic-action-title-rule)
- Rule of thumb: no chart without a takeaway. If you cannot state in one sentence what the chart is for, either find the takeaway or delete the chart. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-5-the-knaflic-action-title-rule)

## Core concept 6 — Axis labels

- Label the units. "Revenue (USD millions)" not "Revenue." — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-6-axis-labels)
- Date axes get human dates. "Jan 2024" - not raw timestamps, not "Q1". — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-6-axis-labels)
- Avoid axis label rotation. If labels overflow horizontally, the chart probably has too many categories. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-6-axis-labels)

## Core concept 7 — Annotations

- An annotation is a written assertion attached to a specific data point. Use annotations for: — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-7-annotations)
  - The single highest or lowest point ("peak: 8,420 - Aug 14") — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-7-annotations)
  - A regime change ("← deploy of v2.3") — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-7-annotations)
  - An anomaly ("backfill artifact; ignore") — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-7-annotations)
- Annotations are journalism inside a chart. Empty annotations ("note this") are wasted ink. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-7-annotations)

## Core concept 8 — Accessible data-viz captioning

- The "describe the trend, then the value" pattern: — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-8-accessible-data-viz-captioning)
- > Sales increased steadily from January to July, then declined through December. The peak was 8,420 units in July. The lowest month was December at 3,100 units. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-8-accessible-data-viz-captioning)
- Anti-pattern: read every value. > January was 4,200, February was 4,800, March was 5,100... — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-8-accessible-data-viz-captioning)
- If every value matters, provide a <table> and skip the chart alt-text recital. — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#core-concept-8-accessible-data-viz-captioning)

## References

- W3C WAI: Images Tutorial and Alt Decision Tree — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#references)
- Edward Tufte, The Visual Display of Quantitative Information (2nd ed., 2001) — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#references)
- Cole Nussbaumer Knaflic, Storytelling with Data (2015) — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#references)
- UK GDS: Text descriptions for data visualisations — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#references)
- WCAG 2.1, Success Criterion 1.1.1 (Non-text Content) — [source](https://llms-explorer.com/sources/mdb-context-hub/visual-writing/#references)

## Where this helps

- Writing alt text, captions, and chart titles for a report or dashboard that will be read by both sighted skimmers and screen-reader users. — [source](https://llms-explorer.com/tree/visual-writing/) *(AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.)*
- Deciding what information a chart's title, axis labels, and annotations should each carry so the reader gets the takeaway without needing to study the image. — [source](https://llms-explorer.com/tree/visual-writing/) *(AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.)*
- Auditing an existing data visualization for chartjunk or redundant data-ink before publishing it in a customer-facing or executive document. — [source](https://llms-explorer.com/tree/visual-writing/) *(AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.)*
- Writing accessible descriptions for complex charts with trends or multiple series, where reading every raw value aloud would overwhelm a screen-reader user. — [source](https://llms-explorer.com/tree/visual-writing/) *(AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.)*

## How to apply this

- Apply the alt-text triple (what's there, why it's there, what it shows) when writing alt text for any image that carries information, not just decoration. — [source](https://llms-explorer.com/tree/visual-writing/) *(AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.)*
- Rewrite a descriptive chart title ("Quarterly Revenue, 2023–2024") into an action title that states the takeaway ("Q4 2024 revenue exceeded plan by 18%"). — [source](https://llms-explorer.com/tree/visual-writing/) *(AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.)*
- Use the "describe the trend, then the value" pattern for accessible data-viz captions instead of reciting every data point. — [source](https://llms-explorer.com/tree/visual-writing/) *(AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.)*
- Apply Tufte's data-ink principles when reviewing a chart: maximize the data-ink ratio, erase redundant ink, and reject chartjunk like heavy gridlines or 3-D effects. — [source](https://llms-explorer.com/tree/visual-writing/) *(AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.)*

## Antipatterns

- Duplicating the same information in both alt text and caption, forcing a screen-reader user to hear the same sentence twice. — [source](https://llms-explorer.com/tree/visual-writing/) *(AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.)*
- Reading every value aloud in a chart's accessible description instead of describing the trend and the standout value, when a full data table would serve better. — [source](https://llms-explorer.com/tree/visual-writing/) *(AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.)*
- Publishing a chart with no stated takeaway — if you can't state in one sentence what the chart is for, the fix is to find the takeaway or delete the chart. — [source](https://llms-explorer.com/tree/visual-writing/) *(AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.)*
- Writing an empty or vague annotation ("note this") on a data point instead of a specific, journalistic assertion about what happened there. — [source](https://llms-explorer.com/tree/visual-writing/) *(AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.)*

## Known issues

- The right visual-writing choice depends on which of four distinct readers you're serving (blind screen-reader user, slow-network sighted user, skimmer, search engine) — optimizing for one can shortchange another. — [source](https://llms-explorer.com/tree/visual-writing/) *(AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.)*
- Long descriptions for complex images are structured prose alternatives that take real effort to write well and are often skipped even when the image is complex enough to warrant one. — [source](https://llms-explorer.com/tree/visual-writing/) *(AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.)*
- Axis-label overflow that forces rotation is usually a symptom of too many categories on the chart, not a labeling problem to be fixed with smaller text. — [source](https://llms-explorer.com/tree/visual-writing/) *(AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.)*
- Sparkline-captioning conventions (caption like a word, usually just the latest value) don't generalize cleanly to charts with more than one meaningful series. — [source](https://llms-explorer.com/tree/visual-writing/) *(AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.)*

## Context files

- [Visual Writing](https://llms-explorer.com/downloads/sources/mdb-context-hub/visual-writing.md)