Accessible Images: Alt Text, Figures, Charts, and SVG Done Right

Before writing a single word of alt text, sort every image into one of two buckets: informative or decorative. An informative image conveys content a sighted user would get from looking at it. A decorative image adds visual polish but no information: a background texture, a divider flourish, a stock photo of smiling people next to a contact form. Get this split right and most alt text decisions fall into place.

For a decorative image, give it an empty alt attribute: alt="" (the attribute is present, the value is empty). Screen readers then skip it entirely. Omitting alt altogether is a different thing and worse, because some screen readers will read the file name, announcing something like "hero-final-v3-2025.jpg". For decorative CSS background images there is nothing to do, since they are already invisible to assistive technology. Our alt-text checker flags both missing attributes and likely-useless values.

For an informative image, the alt text should convey the same information or function, not describe pixels. The right alt text depends on context. A photo of a red sweater on a product page might be alt="Red wool crew-neck sweater"; the same photo in a blog post about dye techniques might be alt="Sweater showing uneven madder-root dyeing". Same file, different purpose, different text.

Good alt text is concise, specific, and free of redundancy. A few rules that hold up across almost every case:

• Skip "image of" or "photo of". Screen readers already announce the role as "graphic", so the prefix is noise.
• Match purpose, not appearance. For a functional image, such as a logo inside a link or an icon button, the alt text describes the destination or action: alt="AccessScan home", not alt="green shield logo".
• Don't repeat adjacent text. If a caption or heading already states the information, the image is effectively decorative in that context and can take alt="".
• Mind length. Aim for a sentence or so. If you genuinely need a paragraph, the image is complex and needs the longer treatment below.

Text inside images is a special trap. If a banner image contains the words "50% off this weekend", that text must appear in the alt attribute, because screen reader and braille users cannot read pixels. Better still, render promotional text as real HTML so it scales, reflows, and stays selectable. WCAG 1.4.5 Images of Text (Level AA) discourages baking text into images at all.

The figure and figcaption elements group an image with a visible caption. A common mistake is treating figcaption as a replacement for alt text. They do different jobs: alt is the textual alternative for users who cannot see the image, while figcaption is a visible caption everyone reads, often crediting a source or adding commentary.

Concretely: <figure><img src="chart.png" alt="Bar chart, sales up 30% in Q4"><figcaption>Quarterly revenue, 2025</figcaption></figure>. The alt conveys the data point; the caption labels the figure. If you want the caption to also act as the accessible name of the figure, reference it with aria-labelledby pointing at the figcaption's id. Never leave alt empty just because a caption exists, unless the caption truly contains the full information and the image is decorative.

A line chart, a process diagram, or a dense infographic cannot be summarised in one short sentence. WCAG still requires an equivalent, so use a two-part approach: a short alt text that names the chart and its headline takeaway, plus a longer description nearby that conveys the detail.

The most robust pattern is to put the full description in visible page text or a data table right next to the image. A table is often the best alternative for a chart, because the underlying numbers are exactly what a sighted reader extracts from the bars. If you cannot show the long description, link to it or place it in a collapsible details element, and reference it with aria-describedby so assistive technology associates the two.

A worked example: alt="Line chart: monthly active users grew from 12k in January to 47k in December" gives the trend. The adjacent table or paragraph then lists each month's figure so a screen reader user can explore the data, not just the summary. For dashboards built from many charts, the same logic scales: every visual needs a text equivalent.

SVG is increasingly used for icons, logos, and charts, and it needs different handling from a raster img. An inline <svg> is not automatically exposed with a sensible accessible name. The reliable recipe for an informative SVG is to add role="img" plus an accessible name, either with a <title> element as the first child or with aria-label on the svg. A <title> inside the SVG is the most widely supported option.

For a decorative SVG, such as an icon sitting beside text that already says "Download", hide it with aria-hidden="true" so it is not announced twice. For an icon-only button with no visible text, the accessible name goes on the button via aria-label, and the SVG itself stays aria-hidden. Also confirm meaningful SVG graphics meet contrast (3:1 for graphical objects against adjacent colours) and, if interactive, target-size expectations.

• Decorative? Use alt="" (or aria-hidden on inline SVG). Never omit the attribute.
• Informative raster image? Write concise alt that matches its purpose in this context.
• Functional image (link or button)? Describe the action or destination, not the picture.
• Contains text? Put that text in the alternative, or use real HTML text instead.
• Complex chart or diagram? Short alt for the takeaway plus a full text or table description nearby.
• Inline SVG? Add role="img" and a title/aria-label, or aria-hidden if decorative.

Run these checks during content review, not as a last-minute audit. For a broader pass across headings, contrast, forms, and links, work through the accessibility checklist and re-scan after fixes land.