Images and alternative text

Overview

What alternative text carries that the picture does not

Alternative text is a short written description that takes the place of an image when the image cannot be seen. A screen reader reads this text aloud so the reader hears what the image contains.

Without alternative text, a reader with a print disability reaches the image and hears nothing, or hears a file name such as "IMG_4523.jpg." The information in the image is lost. Alternative text is the bridge that carries that information across.

In a PDF, a meaningful image is tagged as a Figure and carries an Alt entry that holds the text. A decorative image is marked as an artifact so the screen reader skips it entirely.

Information or decoration: the first question to ask

Before you write anything, ask whether the image carries information.

If you removed the image, would the reader miss something important? If yes, the image is informative. It needs alternative text that conveys the same information.

If the image is only there for visual styling, such as a border line or a background texture, it is decorative. It carries no information. Decorative images must be marked so a screen reader skips them. If they are not marked, the reader is interrupted by noise that means nothing.

This distinction, informative or decorative, comes first. How you handle the image follows from it.

In depth

The kinds of images, and how each one is handled

There are five kinds of images, and each is handled differently.

Informative images carry information the reader needs. A photograph of a lab procedure, a map of the campus, or a diagram of a cell are all informative. These images are tagged as figures and given alternative text that describes what they show.

Decorative images carry no information. They are visual flourishes, such as a line that separates sections or a stock photo of people shaking hands that adds no facts to the page. These images must be marked as artifacts so a screen reader skips them. If a decorative image is left unmarked, the screen reader may announce "graphic" and read a file name, cluttering the reading experience with meaningless noise.

Functional images act as buttons or links. An image of a printer icon that opens a print dialog, or a logo that links to the home page, is functional. The alternative text must say what the image does, not what it looks like. The correct text is "Print this page," not "Printer icon." The correct text is "Home," not "University logo."

Complex images are charts, graphs, and diagrams. A bar chart showing enrollment trends, or a flowchart of a grant application process, is complex. The alternative text should state the point the image makes, not list every data point. For a chart, the text might say, "Bar chart showing that enrollment increased by 20 percent from 2020 to 2024." If the exact numbers matter, a longer description should be provided nearby, such as in the body text or in an adjacent data table.

Images of text are pictures of words. A scanned page, a screenshot of a tweet, or a poster saved as an image are all images of text. The real fix is to recover the actual text, for example with optical character recognition (OCR), and present it as real text rather than as a picture. Describing the picture is a poor substitute because the reader cannot select, search, or resize the words.

Writing alt text that actually helps

Good alternative text is accurate, brief, and useful. It answers the question: what information does this image give the reader?

For a photograph, describe what is in the image. Instead of writing "photo," write "Three students collaborating at a laptop in the library." Instead of writing "image001.png," write "Professor Maria Chen presenting at the 2024 symposium."

For a chart, state the takeaway. Before: "Chart showing sales data." After: "Bar chart showing that quarterly sales rose from 12,000 dollars to 28,000 dollars between March and September."

For a functional image, state the action. Before: "Blue arrow icon." After: "Download the application form."

For a complex diagram, summarize the main point in the alt text and provide the detail nearby. The alt text might say, "Flowchart showing the three steps to apply for a research grant." The body text or an adjacent table can then list each step in full.

Avoid repeating a caption that already sits next to the image. If the caption already says, "Figure 2: Enrollment trends, 2020 to 2024," the alt text should not say the same thing. It should describe what the chart shows, so the reader gets the visual information the caption does not provide.

Where the machine stops: present is not the same as accurate

Automated checking software can confirm two things about images. It can confirm that a figure has an Alt entry. It can confirm that a decorative image is marked as an artifact. That is where the machine check ends.

Software cannot judge whether the alternative text is accurate or useful. It cannot tell whether "Bar chart showing enrollment trends" is a good description or a vague one. It cannot tell whether an image of a line across the page is a meaningful graphic or just a decorative separator that should have been marked as an artifact.

This means an automated pass on images only proves that the plumbing is present. It does not prove that the descriptions are any good. A file can pass every automated check and still leave its reader completely in the dark about what the images contain. A person must review the text to know whether it truly replaces the image.

Reference detail

The standards behind images and alt text

WCAG 1.1.1 sits under the Perceivable principle, which is the first of the four WCAG principles. It is a Level A requirement, meaning it is part of the most basic tier of conformance.

Common mistakes, named

Authoritative sources