Short answer: Alt text is a brief, accurate description of an image that conveys its purpose or content. Write it as if you’re describing the image to someone who can’t see it. Keep it under 125 characters, skip phrases like ‘image of’ or ‘picture of’, and always include context if the image contains text or links.
Key takeaways
- Alt text must describe the image’s purpose, not just its appearance.
- Keep alt text under 125 characters for screen reader efficiency.
- Never start alt text with ‘image of’ or ‘picture of’.
- Decorative images should have empty alt text (alt=””).
- Image links need alt text describing the link’s destination.
- Use natural language, not keyword-stuffed phrases.
What you will find here
- What Is Alt Text and Why Does It Matter?
- When to Use Alt Text and When to Skip It
- The 4 Rules of Effective Alt Text
- Common Alt Text Mistakes (and How to Fix Them)
- How to Write Alt Text for Complex Images
- Alt Text and SEO: A Happy Side Effect
- How to Audit Your Existing Alt Text
- Alt Text for Different Image Types
- Writing Alt Text for Data Visualizations
- Automated Alt Text Tools: What They Get Right and Wrong
Alt text is one of those things every web developer knows they should do, but few do well. You’ve seen the output: “image123.jpg” or “photo of man shaking hands.” Neither helps a screen reader user understand what’s happening. Let’s fix that.
What Is Alt Text and Why Does It Matter?
Alt text (short for alternative text) is the invisible label screen readers announce when they encounter an image. It’s also what search engines use to understand image content. But its primary job is accessibility: giving someone who can’t see the image the same information a sighted user gets.
When you get alt text wrong, you’re blocking a significant portion of users from your content. When you get it right, you’re providing an equivalent experience. That’s the goal.
When to Use Alt Text and When to Skip It
Not every image needs descriptive alt text. The rule is simple: if the image conveys information, describe it. If it’s purely decorative, skip it.
Informative Images
These include photographs, illustrations, charts, diagrams, and any image that shows something a user needs to know. For example, a photo of a product on an e-commerce site needs alt text that names the product, its color, and context. A screenshot of a software interface should describe what the image shows, not just “screenshot.”
Decorative Images
Decorative images are background patterns, spacers, or stock photos that add visual flair but no information. Use alt="" (empty alt). Screen readers will ignore them. Do not omit the alt attribute entirely—that causes some screen readers to read the file name.
Functional Images
Images that are links or buttons need alt text that describes the destination or action. For a logo that links to the homepage, use alt="Home". For a search icon button, use alt="Search". Never describe the image itself when it’s a link—describe where it goes.
The 4 Rules of Effective Alt Text
Writing good alt text isn’t hard. Follow these principles:
- Be concise but complete. Aim for under 125 characters. If you need more, the image might be too complex for a single description—consider summarizing the key point in alt text and providing a longer description elsewhere.
- Don’t start with “image of” or “photo of.” Screen readers already announce it’s an image. Starting with that is redundant. Dive straight into the content.
- Include text that appears in the image. If the image contains words or numbers, include them exactly as written. For screenshots of error messages, that’s critical.
- Use natural, context-aware language. The same photo might need different alt text depending on the surrounding text. A picture of a cat on an adoption site should describe the cat’s color, age, and expression. The same photo on a blog post about pet photography should focus on lighting and composition.
Common Alt Text Mistakes (and How to Fix Them)
Let’s look at real examples developers often write, and better alternatives.
| Poor Alt Text | Why It Fails | Better Alt Text |
|---|---|---|
| “Untitled-1.jpg” | File name gives zero information | “Red ceramic coffee mug on a wooden table” |
| “Image of a man” | Vague, starts with “image of” | “Man in blue shirt smiling at laptop in coffee shop” |
| “Chart showing revenue growth” | Too generic; user can’t understand chart | “Line chart: Revenue increased 40% from Q1 to Q4 2023” |
| “” | Empty alt on a product image that a user needs to identify | “Men’s gray running shoes with orange laces” |
Avoid keyword stuffing. “Buy cheap laptops online laptop sale” isn’t helpful for a screen reader user. Write for humans first. Search engines are smart enough to understand natural language.
How to Write Alt Text for Complex Images
Some images are too detailed for a short alt text. Infographics, complex charts, and diagrams fall into this category.
For infographics, write alt text that summarizes the infographic’s main takeaway. Then add a longer description in the surrounding text or in an ARIA-describedby region. For charts, focus on the data trend or key value. Users can’t hear a full data table in alt text—they’ll get lost.
If the image contains a lot of text (like a slide from a presentation), include the full text in the alt attribute. Yes, that can be long, but screen reader users need that information. Consider adding a link to a text version if it’s over 125 characters.
Alt Text and SEO: A Happy Side Effect
Good alt text helps search engines understand your images, which can improve your ranking in image search. But don’t sacrifice user experience for a rankings boost. Write for accessibility first. The SEO benefits follow naturally.
If you’re optimizing for SEO, include your target keyword in alt text only when it naturally describes the image. Forcing a keyword into every image’s alt text looks spammy and hurts users. Google’s algorithms are sophisticated enough to penalize that.
How to Audit Your Existing Alt Text
You don’t have to rewrite all alt text from scratch. Here’s a quick workflow:
- Use your browser’s accessibility inspector or a tool like Axe to find images missing alt attributes.
- For each image, ask: “Does this image convey information I’d miss if it were gone?” If yes, write descriptive alt text. If no, set
alt="". - Check that images inside links have alt text describing the destination, not the image itself.
- Review any alt text that looks like keyword stuffing or was auto-generated.
For more depth on related accessibility techniques, read our Beginner’s Guide to ARIA Labels in HTML and learn how to complement alt text with proper landmark regions.
Alt Text for Different Image Types
Here are quick guidelines for common scenarios:
- Photos: Describe key subjects, actions, and context. Avoid subjective adjectives like “beautiful” unless it’s relevant.
- Illustrations and icons: Describe the concept they represent. A magnifying glass icon means “search”.
- Screenshots: Include any text in the image, and describe the element the screenshot is highlighting.
- Buttons and logo links: Alt text equals the link’s purpose. For example, a logo linking to the homepage gets
alt="Home".
Writing Alt Text for Data Visualizations
Data visualizations like bar charts, pie charts, and heatmaps pose a unique challenge. A brief alt text like “Bar chart of sales by quarter” doesn’t give a blind user the data they need. Instead, focus on the key insight.
A good approach: write alt text that states the main takeaway. For a bar chart showing a spike in Q3, use “Bar chart: Sales in Q3 were $500,000, a 25% increase over Q2.” That gives the user the essential information without overwhelming them.
If the chart contains multiple data points you want to share, provide a data table nearby. The alt text can then point to it: “Bar chart of quarterly sales. See the adjacent table for full data.” This way, users who need the details can access them, while others get the summary.
Automated Alt Text Tools: What They Get Right and Wrong
Content management systems and image APIs sometimes offer auto-generated alt text. Services like Azure Computer Vision or Google Cloud Vision can produce a description in seconds. These tools can be a starting point, but they’re not reliable enough to use as-is.
What they get right: they often identify objects, colors, and activities. For a photo of a dog in a park, they might produce “a dog running on grass.” That’s decent.
What they get wrong: they miss context. They can’t tell you that the dog is the user’s newly adopted pet, or that the park is a specific location important to the article. They also sometimes produce nonsense or offensive descriptions. Never ship auto-generated alt text without human review. Use it to save a few seconds of typing, but always edit for accuracy and context.
Writing alt text that actually helps users is a small habit change that makes a huge impact. Every time you add an image, pause and think about what someone using a screen reader needs to know. Then write it. That’s all it takes.
Frequently asked questions
What is alt text and why is it important?
Alt text is a description of an image that screen readers read aloud for users who are blind or have low vision. It’s also used by search engines to understand image content. Writing good alt text ensures all users can access the information images convey, improving overall accessibility and user experience.
How long should alt text be?
Aim for 125 characters or fewer. This is the limit most screen readers announce before pausing. If your description is longer, consider summarizing the key point in the alt attribute and providing a full description in the surrounding text or in a separate accessible document.
Should I start alt text with ‘image of’ or ‘photo of’?
No. Screen readers already announce that an element is an image. Starting with those words is redundant. For example, instead of ‘Image of a dog in a park,’ write ‘Dog in a park.’ This keeps alt text concise and avoids unnecessary repetition.
Do decorative images need alt text?
Decorative images should have empty alt text: alt=””. This tells screen readers to ignore the image entirely. Do not omit the alt attribute, because some screen readers will read the image file name instead, causing confusion.
Can alt text help with SEO?
Yes, alt text helps search engines understand image content, which can improve your image search rankings. But always write alt text for accessibility first. Natural, descriptive alt text is what both users and search engines prefer. Avoid keyword stuffing.
Leave a Reply