Alt text for charts, graphs and infographics

A product photo needs one sentence. A bar chart with twelve data points, or an infographic with five statistics and a flow diagram, can’t fit into one sentence, and trying to cram it all into the alt attribute makes things worse. Complex images need a two-part text alternative: a short alt that identifies the image and its main point, and a long description that contains the information.

What W3C recommends

W3C’s tutorial on complex images describes them as “graphs and charts, including flow charts and organizational charts; diagrams and illustrations where the page text relies on the user being able to understand the image; maps showing locations or other information” (W3C, Complex Images).

For these, “a two-part text alternative is required. The first part is the short description to identify the image and, where appropriate, indicate the location of the long description. The second part is the long description – a textual representation of the essential information conveyed by the image” (same source).

W3C also suggests making long descriptions available to everyone, because complex images “can be difficult to understand by many people – especially those with low vision, learning disabilities, and limited subject-matter experience”.

Part 1: the short alt

The short alt should do three things in one or two sentences:

1. Say what kind of image it is: “Bar chart”, “Line graph”, “Flow diagram”, “Map”.
2. Give the main takeaway, the reason the image is on the page.
3. Say where the detail is, if it’s not obvious: “Data in the table below.”

Examples:

• alt="Line graph of monthly website visitors in 2026: steady growth from 8,000 in January to 21,000 in September. Full data in the table below."
• alt="Pie chart of customer support tickets by category; billing questions are the largest share at 41%. Breakdown follows."
• alt="Flow diagram of our returns process in four steps, described in the list below."

Avoid alt="chart", alt="infographic" or a 900-character paragraph of every number.

Part 2: the long description

The long description is regular content on the page (or on a linked page) that conveys what the image conveys. The best format depends on the image:

Sometimes the structure of the chart itself matters, not just the numbers. W3C notes that “the sequence of colors used and the relative heights of the columns in a bar chart may be relevant information” when the composition is important (W3C). A chart in a design-system document might need its colour coding described. A chart in a news story usually just needs the numbers.

HTML patterns that work

Pattern A: figure with the description in the caption

<figure role="group">
  <img src="visitors-2026.png"
       alt="Bar chart of monthly visitors, January to September 2026, described in detail below.">
  <figcaption>
    <h3>Monthly visitors, 2026</h3>
    <p>Visitors grew every month, from 8,000 in January to 21,000 in September.
       The biggest jump followed the June product launch.</p>
    <table>
      <caption>Monthly visitors, January–September 2026</caption>
      <tr><th scope="col">Month</th><th scope="col">Visitors</th></tr>
      <tr><td>January</td><td>8,000</td></tr>
      <!-- … -->
    </table>
  </figcaption>
</figure>

This is close to W3C’s “structurally associating the image and its adjacent long description” approach. The role="group" keeps older browsers informed that the parts belong together.

Pattern B: alt says where the description is

<img src="org-chart.png"
     alt="Organisation chart of the support team. Described under the heading 'Support team structure'.">
…
<h3>Support team structure</h3>
<ul>…</ul>

W3C’s Approach 2: describe the location of the long description in the alt attribute. It works when the description is on the same page.

Pattern C: link to a separate page

For very long descriptions (a detailed scientific figure, say), link to a dedicated page. Put the link right next to the image, inside a <figure>/<figcaption>, so users can find it.

A caution about aria-describedby

aria-describedby can point an image at a description elsewhere on the page. But W3C warns that the referenced content “is treated as one continuous paragraph of text”. Screen readers lose headings and table structure. Use it only for short, text-only descriptions, and never as a substitute for a real data table.

What about longdesc?

The old longdesc attribute pointed to a URL with a description. Support has always been patchy and it isn’t part of the current HTML standard, so prefer visible descriptions or a nearby link.

Infographics: the honest approach

Infographics are usually a set of facts dressed as an image. The most accessible version is often the same facts as HTML: headings, short paragraphs and lists. The image then becomes an illustration of the text, and its alt can be short:

alt="Infographic summarising the five survey findings described below."

If you publish infographics for sharing on social media, publish the text version on your site too. It’s also better for search, because Google says it “doesn’t index CSS images” and extracts image meaning from “the content of the page” (Google Search Central).

Charts made with JavaScript libraries

Interactive charts drawn as SVG or canvas are a different problem. A canvas has no text content at all, and SVG charts often expose dozens of meaningless shapes to screen readers. Common fixes:

• Give the chart container role="img" and an aria-label with the short summary, and hide the internals with aria-hidden="true" if you provide the data elsewhere.
• Render a real <table> of the same data below the chart, or behind a “Show data table” toggle.
• Check your library’s accessibility options. Several popular libraries have accessibility modules that add keyboard navigation and descriptions.

Writing tips for long descriptions

• Lead with the conclusion, then the supporting data.
• Use the same units and labels as the chart.
• Mention axis ranges if a truncated axis exaggerates a trend. Honest charts help everyone.
• Don’t describe colours unless they carry meaning. If they do (red = overdue), say what they mean.
• Keep the reading order logical. For infographics, follow the designer’s intended path.
• Check the numbers. A long description that disagrees with the chart is worse than none.

Where AI helps, and where it doesn’t

AI vision models can be quite good at reading chart titles and labels and drafting a summary. They’re also capable of misreading a small label or inventing a value they can’t see. Treat any AI-drafted summary as a draft and check every number against the source data. Better still, generate the table from the source data, not from the picture.

Altpass drafts the short alt for complex images using the page context (title, nearest heading, surrounding text), so it can say what the chart is about rather than just “bar chart”. The long description should come from your data and your team. That’s not a limitation we’re hiding. It’s how complex images should be done.

Check your reports and blog posts

Pages with charts are often the worst offenders, with alt="chart" and no data table. Run the free Altpass checker on a report or article page to see which images have missing or generic alt text, then use the patterns above to add the long descriptions.

Updated 2026-10-07