How to Write Effective Alt Text for Images

Alt text (alternative text) describes images for users who can't see them—whether due to visual impairments, slow connections, or broken image links. Good alt text improves accessibility, boosts SEO, and ensures your content works for everyone. Here's how to write it effectively.

What is Alt Text?

Alt text is an HTML attribute that provides a text alternative for images:

<img src="photo.jpg" alt="A golden retriever playing fetch on a sunny beach">

Screen readers announce this text to blind users. Search engines use it to understand image content. And it displays when images fail to load. Alt text is essential, not optional.

How to Write Good Alt Text

Follow these principles for effective image descriptions:

• Be specific and descriptive: "Woman typing on laptop" is better than "Person working."
• Keep it concise: Aim for under 125 characters—screen readers truncate longer text.
• Describe the image, not the obvious: Skip "image of" or "picture of"—screen readers already announce it's an image.
• Include context: Consider why the image is there and what information it conveys.
• Don't keyword stuff: Write for humans first. Natural descriptions help SEO better than forced keywords.

Alt Text by Image Type

Informational Images

Photos, illustrations, and graphics that convey information need descriptive alt text that captures their meaning:

• Product photos: "Blue Nike Air Max 90 running shoes, side view"
• Team photos: "Marketing team of five people meeting in glass-walled conference room"
• Screenshots: "Gmail inbox showing three unread emails with red notification badge"

Functional Images

Images used as links or buttons need alt text describing the action, not the image:

• Logo as home link: "Company Name home page" (not "Company logo")
• Social icon: "Follow us on Twitter" (not "Twitter bird logo")
• Search button: "Search" (not "Magnifying glass")

Decorative Images

Images that add visual interest but no information should have empty alt attributes:

<img src="decorative-border.png" alt="">

This tells screen readers to skip the image entirely. Examples include background textures, decorative icons, and images that duplicate adjacent text.

Complex Images

Charts, graphs, and infographics often need more than 125 characters to describe adequately. Options include:

• Brief alt text summarizing the key takeaway, with detailed data in surrounding text
• Link to a text-based version of the data
• Use aria-describedby to reference a longer description elsewhere on the page

Common Mistakes to Avoid

Many content creators make avoidable errors when writing alt text. One common mistake is overloading descriptions with unnecessary details like 'beautiful' or 'amazing'—these adjectives don't add functional value. For example, 'A beautiful golden retriever on the beach' is less effective than 'A golden retriever playing fetch with a tennis ball on a sunny beach'.

Another error is using generic phrases like 'image of' or 'picture of' which screen readers already announce. Focus on describing the content and function of the image. Also, avoid keyword stuffing for SEO—search engines prioritize clear, natural descriptions over forced keyword repetition. Finally, never forget to add alt text altogether, especially for infographics, charts, or maps which require more structured descriptions.

Practical Examples for Different Image Types

Different image types require tailored approaches. For product images, include key details: 'Blue size M organic cotton t-shirt with crew neckline'. For infographics, briefly explain the main message: 'Bar chart showing UK renewable energy growth from 2015 to 2025'.

When describing people, mention relevant details like: 'A Black woman in a wheelchair smiling while using a tablet'. For icons, state their function: 'Menu icon (three horizontal lines)'. Decorative elements should use empty alt text (alt="") as explained in the FAQs. Always ask: Does this description convey the same meaning if the image were unavailable?

Tools to Help Write Alt Text

Automated tools can assist but should never replace manual review. TextTools offers an AI-powered alt text generator that suggests descriptions based on image content. Other useful tools include: Google's Cloud Vision API for object detection, and WAVE accessibility checker to validate your alt text implementation. For complex images, consider using the longdesc attribute to link to a detailed description page. Always review AI-generated suggestions for accuracy and context-specific relevance.

Alt Text Length Guidelines

FAQ