Mobile and Accessibility

Alt Text for Images That Helps Everyone

How to write short, useful image descriptions that serve screen reader users, slow connections and search engines, with clear examples of good and bad alt text.

On this page
  1. What alt text actually is
  2. Decide what job the image does
  3. Keep it short and specific
  4. Avoid common mistakes
  5. Think about context
  6. How to audit alt text on an existing site
  7. Alt text and other image habits
  8. A quick test

What alt text actually is

Alt text is a short written description attached to an image in a page’s code, through the alt attribute. It is not usually visible. It is read aloud by screen readers, displayed if an image fails to load, and available to software that cannot interpret pictures. Search engines may also use it as one clue about what an image shows.

The most useful way to think about it: alt text is what you would say if you were reading the page aloud to a friend who could not see the images. You would not describe every pixel. You would say what the image contributes to the page.

Decide what job the image does

Before writing anything, ask what role the image plays. The answer determines the text.

Informative images carry content. A photo of a product, a diagram, a screenshot or a chart belongs here. The alt text should convey the information a sighted reader gets. For a photo of a hand-knit scarf on a product page, something like “Green wool scarf with a cable pattern, folded on a table” is enough.

Functional images do something, such as an icon that works as a button or a logo that links to the home page. The alt text should describe the action or destination, not the picture. A magnifying glass icon inside a search button might be described as “Search”, and a linked logo as the site name with the purpose of the link.

Decorative images add visual style but no information, like a divider line or a purely ornamental background shape. These should have an empty alt attribute (alt=""), which tells screen readers to skip them. This is different from leaving the attribute out entirely, which can cause some software to read out a file name instead.

Images of text should be avoided where possible, since text in an image cannot be resized or read well by many tools. If one is unavoidable, the alt text should repeat the words in it.

Keep it short and specific

There is no exact limit, but descriptions that fit in a single short sentence tend to work best. A long description can be tiring to listen to. If an image needs a lengthy explanation, such as a complex chart, give a brief summary in the alt text and put the full explanation in the visible page text or a table nearby.

Compare these for a photo on a bakery page:

  • Poor: “image1.jpg”
  • Poor: “bread bread loaf sourdough best bakery buy bread”
  • Better: “Sliced sourdough loaf on a wooden board”

The first tells the reader nothing. The second is keyword stuffing, which is unpleasant to listen to and may be seen as manipulative; it echoes the problems discussed under keyword stuffing. The third is natural and specific.

Avoid common mistakes

  • Starting with “image of” or “picture of.” Screen readers already announce that it is an image. Say what it shows.
  • Repeating the caption. If a visible caption already describes the photo, the alt text can be shorter or empty, otherwise listeners hear the same thing twice. Judge by what the reader would be missing.
  • Using file names or generic words. “DSC_0042” or “photo” helps nobody.
  • Stuffing keywords. A description should serve the reader first. Mentioning a relevant term when it truly describes the image is fine.
  • Describing irrelevant detail. “A woman smiling” on a page about a medical service may miss what the image is meant to convey, such as the clinic reception area.
  • Forgetting context. The same photo may need different text on different pages, depending on why it is there.

Think about context

Alt text works together with the text around it. On an article about hiking boots, a photo of boots with mud on the soles might carry the point “the tread after a wet trail.” On a shop page, the same image might simply need “Brown leather hiking boot, side view.” Write for the reader’s purpose on that specific page.

Charts and diagrams deserve special care. A line chart’s alt text should state the main takeaway (“Monthly visits rise steadily through the year”) rather than “line chart.” If exact values matter, include a data table on the page itself. Any numbers you do include must be accurate, so avoid guessing.

How to audit alt text on an existing site

A manual pass is manageable for a small site:

  1. Open key pages and list each image.
  2. For each, decide whether it is informative, functional or decorative.
  3. Check the existing text against that role. Is it present, specific and short? Is a decorative image set to empty?
  4. Fix the worst offenders first: functional images with no text (a button nobody can identify) and informative images on important pages.

Automated checkers can find missing attributes quickly across many pages, though they cannot judge quality. A crawl may list every image without an alt attribute, but you must still decide what the text should say. For a quick routine, accessibility checks every site owner can run include a review of images alongside keyboard and contrast tests.

Alt text and other image habits

Descriptions are one part of image care. File size and format affect loading, which matters on phones with weaker connections, and image optimization covers that side. Meaningful file names and surrounding text help too. Alt text should not be treated as a ranking trick; its main job is communication. Search engines change how they interpret images, and no particular outcome can be promised, but writing for the reader is generally consistent with what they try to reward.

A quick test

Read through your alt text with the images hidden. Does the page still make sense? Do you get the same information a sighted visitor would? If a description feels awkward when read aloud, shorten it. If a reader would miss something important, add it. That simple read-aloud test catches most problems.

The complete guide to mobile and accessibility

Mobile Friendliness and Accessibility Basics
Read the guide

Keep exploring

Guides from other topics

All topics →