Images and alt text: what to write, and what search reads

Frame 1 · PurposeStart with why the image is there

The W3C’s images tutorial puts it simply: “Images must have text alternatives that describe the information or function represented by them.” What those words should be depends on the image’s purpose, and only the author can judge that. The W3C’s example is a bird: on a website about parks its exact type may barely matter, while on a website about birds it may be the point.

The W3C’s alt decision tree turns that judgement into five questions, asked in order.

1. Does the image contain text?

   If the same text is also on the page nearby, or the text is only a visual effect, leave the alt empty. If the text is an icon with a job, describe the job. If the text appears nowhere else, put the words of the image in the alt.

   If not, go to question 2.

2. Is the image a link or a button, and would the link or button be hard to understand without it?

   Describe where the link goes or what the button does, not what the picture looks like.

   If not, go to question 3.

3. Does the image add meaning to the page?

   For a simple photo or graphic, write a brief description of that meaning. For a chart or diagram, give its information elsewhere on the page. If it repeats text that is already nearby, leave the alt empty.

   If not, go to question 4.

4. Is it purely decorative, or not meant for visitors at all?

   Leave the alt empty.

   If not, go to question 5.

5. Still unsure?

   The decision tree does not cover every case. The full images tutorial does.

The W3C also advises against putting text inside images at all, unless the image is a logo.

Frame 2 · Empty is an answerWhen the right alt text is none

A decorative image, one that adds nothing a visitor needs, gets an empty alt attribute: alt="". Screen readers then skip it, instead of adding clutter. Leaving the attribute out altogether is not the same: the W3C notes that some screen readers will then read out the image’s file name.

The W3C gives examples of images that may be decorative: borders, spacers and corners; an image beside link text that only makes the link bigger or easier to spot; and a picture that is already described by the text around it.

There is a neat fit with search here. The W3C suggests that decorative images be supplied as CSS backgrounds where possible, and Google says it does not index CSS images. So the images that carry meaning belong in <img> elements with real alt text, where both people and search can read them, and pure decoration can stay in the stylesheet.

Frame 3 · Worked exampleOne photo, two ways to describe it

Here is a real photo, placed the way this sheet suggests: in an <img> element, with its width and height, a responsive srcset with a fallback src, and a caption near it.

Two honest descriptions of it:

Literal.A spiral notebook on wooden slats, with a pale blue pen, its cap, and a phone in an orange case.

For this page.A web page layout sketched in pen in a spiral notebook: crossed boxes where images will go, scribbled lines for text and a row of video frames.

Both are accurate. The second is the one this page uses, because the photo is here to show a wireframe, and the W3C’s guidance is that an informative image’s text alternative conveys its meaning rather than listing everything in it. On a page about stationery, the first might be the better choice.

Frame 4 · SearchWhat Google asks of an image

• Use an image element. Google finds images in the src of an <img> element, including inside <picture>. It does not index CSS images.
• Keep a fallback. When using srcset or <picture> for responsive images, Google recommends always giving a fallback URL in src, because some browsers and crawlers do not understand the newer attributes.
• Use a supported format. Google Search supports BMP, GIF, JPEG, PNG, WebP, SVG and AVIF in an image’s src, and suggests the file extension match the file type.
• Put images near the words about them. Google extracts information about an image from the page, including captions and image titles, so it suggests placing images near relevant text.
• Name the file. A filename gives Google “very light clues”. Its example: my-new-black-kitten.jpg is better than IMG00023.JPG.
• Write alt text for people, and skip the keyword list. Google asks for useful, information-rich alt text in the context of the page, and warns that stuffing alt attributes with keywords gives a negative experience and may cause a site to be seen as spam.
• Reuse one address. If the same image appears on several pages, Google suggests referencing it by the same URL each time, so it can reuse it instead of fetching it again.
• Label drawings in code. For an inline <svg>, Google says a <title> element plays the part of alt text.

Google adds that alt text also improves accessibility for people who cannot see images, “including users who use screen readers or have low-bandwidth connections”. On this subject the two sources ask for the same words.