Alt Text for Charts and Infographics: Long Descriptions

A chart or infographic needs two texts, not one: a short description in the alt attribute that says what the image is, and a long description on the page that carries the information. One sentence in alt text cannot hold the scale, the values, and the trend of a bar chart. The guidance below is for editors, site owners, SEO specialists, and developers who publish charts and infographics in articles.

Photographs and stock images are a different case, handled in article image alt text and stock image licensing. The subject here is data images whose meaning does not fit in a single sentence.

What the W3C and Google say

What the W3C tutorial says

The W3C WAI tutorial on complex images (Opens in a new tab) says complex images, such as charts, diagrams, and maps, need a two-part text alternative: a short description and a long description. The short description identifies the image and, where appropriate, indicates where the long description is. The tutorial's example alt text reads "Bar chart showing monthly and total visitors for the first quarter 2025 for sites 1 to 3". It names the chart type, the measure, and the scope, and it gives no values.

What success criterion 1.1.1 adds

The Understanding page for 1.1.1 Non-text Content (Opens in a new tab) separates two situations. If a short text alternative can serve the same purpose and present the same information, provide one. If it cannot, as with charts and diagrams, provide both a short alternative that briefly describes the content and a long alternative that conveys the information. For a bar chart, it says the long description identifies the chart type, summarizes the data, trends, and implications, and, where practical, provides the underlying data in a table. It can sit on the same page, in a linked file, or next to the content, as long as it is programmatically associated with it.

What Google says about alt text

The Google Search Central image best-practices page (Opens in a new tab) calls alt text the most important attribute for images. It says Google uses alt text together with computer vision and page content to understand an image, asks for information-rich text that fits the page context, and discourages keyword stuffing. Its examples run from a missing alt attribute (bad) to a bare noun (better) to a specific phrase (best). For a chart, specific wording about type and subject beats a vague label, while the details belong in the page text. The image SEO guide covers the wider picture.

Do you need a second text?

A quick test for whether you need the second text

Cover the image and ask whether one sentence could replace it for someone who cannot see it. A product photo, yes. A line chart of monthly output, no: the sentence would have to carry which months were high, which were low, and which way the line moved. If you cannot compress the information into one sentence, you need the long description.

For decorative images the 1.1.1 page takes another route: purely decorative, formatting, or invisible content is implemented so assistive technology can ignore it. The listed techniques include CSS for decorative images (C9) and null alt text (H67).

Decision rule: when one sentence is enough

If a single sentence can carry what the image carries, write short alt text and stop. If not, use the two-part approach in this order: write the short alt and point to the long description, put the finding in the surrounding text, then put the data in a table. For content that does not fit a table, such as the branches of a flowchart, write it under a heading on the page. If the description would interrupt the article, link to a separate section. Reserve aria-describedby for plain-text descriptions.

Finding, picture and long description

Layer one: the finding, in the paragraph

The tutorial recommends referring to complex images in the surrounding text and summarizing their key points. Treat this as the first layer. Put the main finding in the paragraph before the chart, in plain words: "Output rose in the last three months while the first nine stayed flat." Readers who see the chart get a guide to it, and readers who cannot see it still get the point.

Layer two: the picture, with a short alt

The alt attribute identifies the chart and signals where the details are. A formula you can reuse: chart type, what it measures, period or scope, and where the full description lives. Practical suggestion: "Line chart of monthly electricity output for a community energy cooperative, one year. Full description under the heading Output chart details." The tutorial notes that the alt text can name the heading where the long description sits.

This template is a practical suggestion; neither the W3C tutorial nor Google prescribes a format.

Layer three: the long description

The tutorial's bar chart example has a long description covering scales, values, and trends: the first site declining, the second consistent, the third increasing. It also notes that long descriptions can cover composition, such as the sequence of colors or the heights of columns, not only values and trends. Use that as a checklist for what to describe: what is on each axis, what each series is, which points stand out, and which way things move.

Placing the long description

Four options from the tutorial

The tutorial walks through several placements for the long description, each with trade-offs.

On the page, under a heading

For article pages this is the natural default. The description becomes part of the article, appears in the heading outline, and is read by everyone. Choose a heading level one step below the current section so the outline stays orderly, as described in the heading structure guide, and make the heading specific rather than repeating "Chart description" on every chart.

On another page

If the description would interrupt the article, link to it. The tutorial says this works everywhere but ties the link to the image only by proximity. Write the link text so it states the destination, such as "Full description of the output chart".

Inside a figure

The tutorial shows the figure element pairing an image with a link in figcaption, or wrapping the whole description, including headings, text, and a table, inside figcaption. It recommends role="group" for browsers that do not recognize figure.

Limits of aria-describedby

In the tutorial's peacock example, the image points to a paragraph by id. That works for text-only descriptions. Screen readers read the target as one continuous paragraph, so headings and tables are lost. A description that includes a data table should not rely on this method.

The tutorial also sets a general principle: make long descriptions available to everyone, for example as part of the main content. A description hidden for assistive technology users only withholds information that sighted readers would also find useful.

Tables and underlying data

Why a table works

The 1.1.1 page suggests providing the underlying data in a table where practical. A table carries exact values, supports row and column navigation with a screen reader, and lets any reader scan or copy numbers without estimating from bar heights. The chart shows the pattern, while the table gives the values.

How to build it

Use real header cells, mark the first row and, where needed, the first column as headers, give the table a short caption or lead-in sentence, and keep the same order as the chart. Put it right below the image so the two read together. If a chart has many series, one table row per series is easier to follow. Table formatting is covered further in the readable formatting guide.

Telling readers which to look at

A single sentence can direct attention: "The pattern is in the chart; exact values are in the table below." That sentence, the chart, and the table form a complete package for a reader of any ability.

Text baked into infographics

Repeat the words as page text

An infographic can hold dozens of text fragments inside one image file. If those words exist only inside the picture, readers who cannot see or load it get nothing. Since the long alternative has to convey the information, rewrite the infographic's headings and steps as real headings, paragraphs, or a numbered list on the page. That is a practical suggestion that follows from 1.1.1.

Google and text-heavy images

The Google page gives no specific guidance on text rendered inside images. It does advise against choosing an image with text as the preferred image for og:image or schema.org markup, and asks for preferred images that are relevant, representative, and avoid generic logos or text-heavy images. The infographic itself is therefore a poor choice for the social preview; prepare a simple separate cover image.

Break it into parts

The tutorial suggests simplifying images where possible. Replacing one dense infographic with a few smaller images and live text shortens the long description each image needs. Each part then needs only a short alt text, and the section headings join the page outline.

Inline SVG, file names, and captions

For inline SVG, Google says to use a title element instead of alt. It also names captions and image titles, together with the surrounding text, as sources of information about an image's subject, and recommends short descriptive file names over generic ones. A chart file called output-by-month works better than chart1, and a caption that states the finding or the source helps readers too.

Notes by chart type

Bar and line charts

Follow the tutorial's example: say what is on each axis, name each series, state its direction (declining, flat, rising), and point out the highest and lowest points. In a chart with several series, give each its own sentence. If series are separated by color, name the series rather than the color, since a color name means nothing to a reader who cannot see the chart.

Pie charts

List the slices and their shares in order from largest to smallest. The W3C tutorial has no pie-specific alt rule, so this is a practical suggestion.

Flowcharts

The information in a flowchart is order and branching. Write the description as a numbered list with one step per item and the yes and no paths stated plainly. This sits well with the tutorial's principle that the description can be part of the page.

Maps

The tutorial lists maps among complex images. Describe the main pattern in a sentence, which regions are highest and lowest, and give exact values in a table. "Darker means higher" does not help someone who cannot see the shading.

Units, period, source and slips

Units, period, and source

Every long description should state the unit, the period, and the source of the data. Say whether the data comes from your own work or from an outside source and name that source. Never invent a source.

Mistakes worth avoiding

Keep interpretation apart from data in the long description. "The third series rose" is something the chart shows; "because of the autumn campaign" is a claim the chart does not make. Practical suggestion: put causal claims in the article paragraph that discusses the chart, with a source, and keep the description a neutral account of what the image displays.

Template and CMS fields

Build the figure pattern once

Put the figure structure in the template so editors fill in fields instead of writing markup: image, short alt, caption, and long description or table. The role="group" attribute the tutorial recommends can be defined there once.

CMS fields

A content management system may offer only one alt box on image upload. For complex images that is not enough. Practical suggestion: three fields, namely short alt, caption, and long description body, where the body accepts tables and lists. If the system cannot offer them, a normal article section carries the same content.

Legacy content

You do not have to fix every chart at once. Apply the pattern to new posts, then work through the most-read pages, starting with charts that carry data and have no text equivalent. Decorative images only need empty alt text. A tracking sheet shows which charts are done.

The editorial check

When approving a draft, ask one question: could someone who never sees this image reach the same conclusion from the page? If yes, the pattern is applied. If no, the finding sentence, the table, or the text inside an infographic is probably missing.

A worked example

Example scenario: a community energy cooperative

Example scenario: a community energy cooperative publishes an annual report article with a line chart of monthly electricity output and a seven-step infographic explaining how surplus power is shared. The chart has the alt text "Output graph", and the infographic is a single PNG whose seven steps appear only inside the image.

The repair: the chart's alt text becomes "Line chart of monthly electricity output for the cooperative over one year. Full description under the heading Output chart details." A finding sentence goes above the chart. Below it, a table with month and output columns carries the values. A heading and short paragraph under the table describe the high and low months and the direction of the line. For the infographic, the seven steps are written as a numbered list on the page, the image keeps a short alt text saying the list is below, and the cooperative prepares a plain cover image for social sharing. The same information now exists as a picture, a table, and text.

Who does what

The person who made the chart writes the long description, since they know the main finding best. The editor makes the four parts a publishing check. The developer builds the figure structure and the table markup into the template so the pattern repeats without new decisions.

A short team rule helps: every data image has three counterparts, namely a short alt, a finding in the surrounding text, and a description or table with the details. Decorative images are outside the rule and carry empty alt. If a new editor can remember those three counterparts, the pattern no longer depends on one person.

Checklist and currency

Checklist

• Can one sentence carry the image's information? If not, is there a long description?
• Does the short alt state type, topic, and scope?
• Does the alt point to where the long description is?
• Is the main finding written in the surrounding text?
• Is the data given as a table with real header cells where practical?
• Is the long description visible to everyone rather than hidden?
• Is text from the infographic also on the page as real text?
• Is the alt free of keyword stuffing?
• Do decorative images have empty alt?
• Are series distinguished by more than color?

Currency

The methods above follow the W3C tutorial, the WCAG 2.2 Understanding page, and Google's documentation as published. They can change, so check the current pages before applying them. No alt text pattern carries a ranking promise.

Frequently Asked Questions

How long should alt text for a chart be?

The W3C tutorial sets no character limit. The W3C tutorial asks the short description to identify the image and the long description to carry the information.

Can the long description be hidden?

The tutorial recommends making long descriptions available to everyone, for example as part of the main content.

Can I attach a table with aria-describedby?

Per the tutorial, aria-describedby suits text-only descriptions. Screen readers read the target as one paragraph and do not convey headings or tables.

Must the data always go in a table?

The 1.1.1 page suggests providing the underlying data in a table where practical. When that is not practical, a text description can serve.

Should infographic text be repeated on the page?

The long alternative has to convey the information, so repeating the infographic's content as real text on the page is appropriate. That is a practical suggestion.

What does Google say about alt text for charts?

The Google page treats alt text as the most important image attribute, asks for information-rich text suited to the page context, and discourages keyword stuffing. It has no chart-specific statement.

What about purely decorative lines?

According to the 1.1.1 page, decorative content is implemented so assistive technology can ignore it. Null alt text (H67) is one of the listed techniques.

Conclusion

For charts and infographics, one sentence identifies the image and the long description carries the information. Write the type, topic, scope, and the description's location in the alt text, put the main finding in the surrounding paragraph, give the data in a table where practical, and repeat any infographic text on the page as real text. Keep the long description visible to everyone and use aria-describedby for plain text only. The guidance can change, so check the current pages before applying it.

If you want help building articles whose charts and infographics are accessible from the first draft, you can look at the content writing service at Akua Adforce.