How to Write Alt Text: The Complete Guide

Every image on the web tells a story, but not everyone can see it. Alt text (short for alternative text) is the written description attached to an image that serves as a stand-in when the image cannot be displayed or perceived visually. It is read aloud by screen readers, shown when images fail to load, and indexed by search engines to understand your content.

Writing good alt text is one of the simplest things you can do to make your website more accessible, more discoverable, and more professional. Yet most alt text on the web today is either missing entirely, painfully generic, or stuffed with keywords to the point of being useless.

This guide will teach you how to write alt text that actually works, with concrete examples for every common image type you will encounter.

Why Good Alt Text Matters

Alt text serves three distinct audiences at the same time:

• People using screen readers. Roughly 2.2 billion people worldwide have some form of vision impairment. Screen readers convert alt text into spoken words or braille output, giving these users access to visual content they would otherwise miss entirely.
• Search engines. Google cannot "see" images the way humans do. It relies heavily on alt text, surrounding content, and file names to understand what an image depicts and how it relates to the page. Well-written alt text directly contributes to image search rankings and overall page relevance.
• Everyone else. Slow connections, broken image links, email clients that block images by default — there are countless everyday scenarios where alt text is the only representation of your image a visitor will see.

Neglecting alt text is not just a missed SEO opportunity. In many jurisdictions, it is a legal accessibility requirement under laws like the ADA, Section 508, and the European Accessibility Act.

The Golden Rule: Describe Purpose, Not Just Appearance

The single most important principle of writing alt text is this: describe what the image communicates, not just what it looks like.

Ask yourself: *Why is this image here? What information does it add to the page?* The answer to that question is your alt text.

A photo of a person smiling might need very different alt text depending on context. On a company "About" page, the purpose is to introduce a team member. On a blog post about workplace happiness, the purpose is to illustrate a concept. On a stock photo site, the purpose is to describe the scene for searchability.

Context determines content. Always start there.

Examples by Image Type

Product Photos (E-Commerce)

Product images need to convey the details a shopper would look for: what the product is, its key visual attributes, and any variant information like color or size.

Bad alt text:

<img src="shoe.jpg" alt="shoe" />
<img src="shoe.jpg" alt="buy shoes online best running shoes for men" />

Good alt text:

<img src="shoe.jpg" alt="Nike Air Zoom Pegasus 41 running shoe in black and volt, side profile view" />

The good example names the product, specifies the variant (color), and notes the angle. It reads naturally and gives a screen reader user genuine information about what they are looking at.

Infographics and Charts

Data visualizations are among the hardest images to write alt text for because they often contain a large amount of information. The key is to summarize the main takeaway rather than trying to reproduce every data point.

Bad alt text:

<img src="chart.png" alt="chart" />
<img src="chart.png" alt="bar chart showing data" />

Good alt text:

<img src="chart.png" alt="Bar chart showing website traffic growth from 12,000 visits in January to 48,000 visits in June 2026, with the sharpest increase in March" />

For complex infographics with dense data, consider providing a full text summary in the body of the page and using shorter alt text that references it: alt="Website traffic growth chart, January through June. Full data in the table below."

Team and People Photos

When writing alt text for photos of people, include their name (if known and relevant), their role or what they are doing, and any context that matters for the page.

Bad alt text:

<img src="team.jpg" alt="woman smiling" />
<img src="team.jpg" alt="photo of person" />

Good alt text:

<img src="team.jpg" alt="Sarah Chen, Lead Designer, presenting the new dashboard mockup at the company all-hands meeting" />

Avoid describing physical characteristics unless they are directly relevant to the content. Saying someone is "smiling" is fine if the context calls for it, but cataloguing appearance details is unnecessary and can feel intrusive.

Logos and Brand Marks

Logos are simple but frequently handled incorrectly. The alt text should identify the brand. You do not need to describe the visual design of the logo itself unless the page is specifically about logo design.

Bad alt text:

<img src="logo.svg" alt="logo" />
<img src="logo.svg" alt="green and blue circular abstract shape with text" />

Good alt text:

<img src="logo.svg" alt="AltFrame logo" />
<img src="logo.svg" alt="AltFrame" />

If the logo is also a link to the homepage (as it usually is in a site header), the alt text should reflect the link destination:

<a href="/"><img src="logo.svg" alt="AltFrame — go to homepage" /></a>

Screenshots

Screenshots of software interfaces, error messages, or code need enough detail that someone who cannot see the image can still follow the instructions or understand the point being made.

Bad alt text:

<img src="screenshot.png" alt="screenshot" />
<img src="screenshot.png" alt="settings page" />

Good alt text:

<img src="screenshot.png" alt="WordPress media library settings page with the 'Alt Text' field highlighted, showing where to enter image descriptions" />

If the screenshot contains text that is critical to the content (like an error message), include that text in the alt attribute so screen reader users have the same information.

Decorative and Background Images

Not every image needs alt text. Decorative images — gradient backgrounds, ornamental dividers, purely aesthetic flourishes — should have an empty alt attribute so screen readers skip them entirely.

<img src="divider.svg" alt="" />

Do not omit the `alt` attribute altogether. An image with no alt attribute at all will cause many screen readers to announce the file name, which is a terrible experience. An empty alt="" explicitly signals that the image is decorative.

For CSS background images, no alt text is needed because they are not part of the document structure. But if a background image conveys meaningful content, it should be an <img> element instead.

Do's and Don'ts

Do

• Be specific. "Golden retriever catching a frisbee in a park" is far more useful than "dog."
• Be concise. Get the key information across in as few words as possible without sacrificing clarity.
• Match the context. The same image can need different alt text on different pages depending on why it is there.
• Use natural language. Write alt text as if you are describing the image to someone sitting next to you.
• Include text that appears in the image. If an image contains words (like a banner or sign), reproduce them in the alt text.
• Use empty alt for decorative images. This is not laziness; it is correct practice.
• Front-load the most important information. If the alt text is long, put the key detail first.

Don't

• Don't start with "image of" or "picture of." Screen readers already announce that an element is an image. Adding these phrases is redundant and wastes precious characters.
• Don't stuff keywords. Alt text exists for users first. Search engines are sophisticated enough to penalize obvious keyword spam.
• Don't use the file name as alt text. IMG_4592.jpg helps nobody.
• Don't write a novel. If you need hundreds of words, use a longdesc, a caption, or surrounding body text instead.
• Don't describe every visual detail. Focus on what matters for the content's purpose.
• Don't leave alt text blank on meaningful images. This is the single most common accessibility failure on the web.
• Don't copy the image caption verbatim. Screen reader users will hear the same information twice, which is frustrating.

Length Guidelines

The commonly cited guideline is to aim for 125 characters or fewer. This comes from the fact that some older screen readers would truncate alt text at around that length, and the JAWS screen reader historically paused at 125 characters before continuing.

Modern screen readers handle longer alt text just fine, but the 125-character target remains a solid guideline for most images because it forces you to be concise.

When to keep it short (under 125 characters):

• Product photos
• Headshots and team photos
• Logos
• Simple illustrations
• Icons

When it is acceptable to go longer:

• Complex charts and infographics where a brief summary would lose critical meaning
• Screenshots showing multi-step processes
• Images that contain substantial text (like a photographed document)

Even in longer cases, try to stay under 250 characters. If the description genuinely needs to be longer than that, move the detailed explanation into the page body and use the alt text as a brief summary with a reference to the longer description.

<img src="infographic.png" alt="2026 content marketing trends infographic. Full breakdown in the section below." />

Common Mistakes

Keyword Stuffing

This is by far the most damaging mistake for both accessibility and SEO:

<!-- Don't do this -->
<img src="cake.jpg" alt="best chocolate cake recipe easy chocolate cake homemade chocolate cake how to make chocolate cake" />

This provides a terrible screen reader experience and modern search engines recognize it as spam. Write for humans. The SEO benefit of alt text comes from relevance and accuracy, not repetition.

Starting with "Image of" or "Photo of"

<!-- Redundant -->
<img alt="Image of a sunset over the ocean" />

<!-- Better -->
<img alt="Sunset casting orange and pink light over the Pacific Ocean" />

The <img> tag already tells assistive technology that this is an image. Adding "image of" is like saying "this sentence is a sentence."

Using the Same Alt Text for Multiple Images

If you have a product gallery with five angles of the same item, each image should have unique alt text describing that specific view:

<img alt="Ceramic pour-over coffee dripper, front view showing ribbed interior" />
<img alt="Ceramic pour-over coffee dripper, top-down view showing the brewing hole" />
<img alt="Ceramic pour-over coffee dripper sitting on a glass carafe, in use" />

Describing Irrelevant Details

If an image of your CEO appears on a page about your company's mission, the alt text should focus on who they are and their role, not what color their shirt is. Stay relevant to the content surrounding the image.

Alt Text for Different Contexts

Social Media

Most major social platforms now support alt text for images. On Twitter/X, Instagram, LinkedIn, and Facebook, you can add custom alt text when uploading an image. The interfaces vary, but the principles remain the same: be concise, descriptive, and purposeful.

Social media alt text tends to be more casual in tone, but it should still convey what the image shows. Do not use it as a place to add hashtags or promotional text.

Email Marketing

Email clients frequently block images by default, making alt text doubly important. When images are blocked, your alt text is often the only thing a recipient sees in place of your carefully designed banner or product image.

For email, consider that your alt text may need to carry more weight:

<img src="sale-banner.jpg" alt="Spring Sale: 30% off all plans through March 15" />

Some email designers also style the alt text with inline CSS so it looks presentable even when images are blocked.

Content Management Systems

If you use WordPress, Shopify, or another CMS, there is almost always a dedicated alt text field in the media uploader. Fill it in every time you upload an image. Many CMS platforms will also let you set default alt text at the media library level, which then populates automatically when you insert that image into a page.

The challenge with CMS-managed content is scale. If your site has hundreds or thousands of images, retroactively adding alt text by hand is a massive undertaking, and keeping it current as content evolves is even harder.

Scaling Alt Text with AI Tools

Writing excellent alt text for a handful of images is straightforward. Writing it for an entire e-commerce catalog with tens of thousands of product photos, or a media-heavy blog with years of archive content, is a different challenge entirely.

This is where AI-powered tools become practical. Rather than choosing between no alt text and spending weeks writing it manually, you can use AI to generate a strong first draft for every image on your site and then review and refine as needed.

AltFrame was built specifically for this workflow. It analyzes your images, considers the surrounding page context, and generates alt text that follows the best practices outlined in this guide: concise, descriptive, purpose-driven, and free of keyword stuffing. For teams managing large content libraries, it turns a task that would take weeks into one that takes minutes.

Whether you write every description by hand or use AI to assist at scale, the principles stay the same. Good alt text describes the purpose of the image, stays concise, uses natural language, and treats accessibility as a feature rather than an afterthought.

Quick-Reference Checklist

Before you publish, run through this list for every meaningful image on the page:

1. Does the image have an alt attribute? (Even decorative images need alt="".)
2. Does the alt text describe the image's purpose in context?
3. Is it under 125 characters? If longer, is the extra length justified?
4. Does it avoid starting with "image of" or "photo of"?
5. Is it free of keyword stuffing?
6. If the image contains text, is that text included in the alt?
7. Is it different from the caption (if one exists)?
8. Would someone who cannot see the image understand the content with this description alone?

If you can answer yes to all eight, your alt text is doing its job. Your images will be accessible, your SEO will benefit, and every visitor — regardless of how they experience your site — will get the full picture.