How to Write Good Alt Text for Images (With Examples)

Good alt text describes what an image does, not what it looks like. Write the function for linked or interactive images, a brief description of the information conveyed for content images, and use an empty alt attribute (alt="") for purely decorative images. Keep descriptions concise, around 80-125 characters, and never start with "image of."

Why does function matter more than appearance?

The image's function as a link is more important than its content or appearance (accessibility.asu.edu). When someone using a screen reader encounters an image, they need to know what will happen if they click it or what information they would gain by seeing it. If an image of a magnifying glass is used for a search button, the alt-text would be "Search" rather than "Magnifying glass" (lists.w3.org).

Consider a logo that links to your homepage. Writing alt="Company logo with blue text and red icon" tells someone what the image looks like but not what it does. The functional alt text is simply "Home" or "CompanyName homepage", because that describes where the link takes the user. If the image is also a link or a button, the alt text needs to describe the resulting action (accessiway.com).

For informational images, describe what the image communicates in context rather than listing visual elements. A photo of employees on an About page serves a different purpose than the same photo in a hiring announcement. The first might need "The clinic's five staff members in the reception area" while the second could be "Staff celebrating after clinic expansion." Same image, different functions, different alt text.

What counts as a decorative image?

Decorative images are images that serve no specific purpose, meaning that they are not meant to convey any meaning or important information (help.siteimprove.com). To determine if an image is decorative, ask yourself what useful information would be lost without the image. If none, the image is decorative.

Common decorative images include background patterns, divider lines between sections, icons used purely for visual interest alongside text that already conveys the information, and images that repeat information in adjacent text. A picture of a sleeping dog already sufficiently described by adjacent text needs no additional information, and a null (empty) alt value can be used (w3.org).

For decorative images, use alt="" (an empty string, not a space, not the word "null"). This specific formatting tells the screen reading software to safely ignore the graphic (alttext.ai). Marking them correctly improves the screen reader experience by skipping noise (alttext.ai). Do not omit the alt attribute entirely, as the software might read the messy, confusing file name out loud to the user.

How should I handle images of text?

Avoid images of text whenever possible. Screen readers and other assistive technologies cannot read text that's contained inside an image. They will try to read them, but require an accurate text alternative to do so. When you embed text in an image, you prevent users from resizing it, adjusting contrast, or selecting it with assistive tools.

When you must use an image of text (such as a logo or a specific design element that cannot be reproduced with styled HTML), text within an image must be described in the alt text. The alt text should repeat the text verbatim so that everyone gets the same information. If a promotional graphic reads "Spring Sale: 40% Off All Services", your alt text should include exactly those words.

The Web Content Accessibility Guidelines (WCAG) recommend avoiding using images of text if you intend the text to be read by the user, unless it's essential or necessary such as in a logo or brand name. When the text is not essential, replace the image with actual HTML text styled with CSS to achieve the same visual effect. Real text scales cleanly, works with browser zoom, and adapts to high-contrast modes.

What are the most common mistakes?

Starting with "image of" or "photo of" wastes space and creates redundancy. Screen readers are programmed to recognize an image on a computer screen and will say "image" or "graphic," leaving the description up to us. Someone hears "Image. Image of a laptop." when "Image. Laptop on wooden desk." would be clearer and faster.

The Google Search Central documentation explicitly warns against filling alternative attributes with endless lists of keywords. Alt text stuffed with keywords like "red shoes affordable shoes women's shoes discount footwear" creates a negative experience for screen reader users and can result in search engine penalties. Write for humans first.

Vague descriptions provide no useful information. Being too vague defeats the purpose entirely. "A person doing something" tells the user nothing. The difference between "Person with coffee" and "Customer examining product label on coffee bag" changes whether the reader understands the point of the image.

Writing text that visually describes the image but does not describe the part of the image that directly relates to why the image was included, or repeating information from the main text, are common errors. If the paragraph before an image already explains "Our team meets weekly to review security incidents", the image alt text should add detail like "Six security analysts reviewing dashboard on conference room monitor", not restate what the text already said.

Worked examples

Product photo on e-commerce site: Wrong: "Image of a blue shirt" Right: "Men's cotton crew-neck t-shirt in royal blue"

Icon button to close a dialog: Wrong: "X icon" or "Close button icon" Right: "Close"

Decorative divider line: Wrong: "Horizontal line separator" Right: alt=""

Screenshot in documentation: Wrong: "Screenshot of software interface" Right: "Dashboard showing three active alerts and system status as healthy"

Graph in a report: Wrong: "Bar graph with colored bars" Right: "Bar graph showing 40% increase in scan completion rates from Q1 to Q4"

Team photo on About page: Wrong: "Five people standing together" Right: "Operations team in the Austin office server room"

Can automated tools write alt text?

Automated alt text generators, including those built into content management systems, often miss context. It is a best practice to write alt text yourself instead of relying on auto-generated alt text. An AI tool might identify "woman sitting at desk with laptop" when the actual purpose of the image is to show "incident response analyst triaging security alerts."

Automation can be a starting point but not a final solution. The alt text is a computer-generated, visual description of the image, but does not describe the relevant content of the image. You understand why you chose each image and what role it plays in your content. That context determines what belongs in the alt text.

Before publishing any page, review every image and ask whether someone who cannot see it would understand your content fully. Check the guide (/guide) for broader context on how accessibility fits into your site's overall health, or run the free AI-visibility check (/check) to see how your business appears when assistants like ChatGPT and Claude answer questions. Accessibility improvements compound with other site fundamentals. ActiScore's pricing (/pricing) includes automated accessibility scoring across your entire site, catching missing or poor alt text before it affects your users.