Alt text is the value of an image's HTML alt attribute: a short text alternative describing what an image conveys. It is the copy screen readers announce, the signal search engines use to understand images, and the grounding text multimodal AI search relies on. Good alt text states content and function, not keywords.
Key Takeaways
- Alt text is one attribute, but it serves accessibility, image search, and AI-search grounding at the same time.
- The image alt attribute should describe content and function; skip "image of" prefixes and keyword stuffing.
- Decorative images need empty alt text (
alt="") so assistive tech ignores them. - Alt text is not the same as the title attribute, caption, filename, or surrounding body copy.
- A repeating CMS check prevents new images from shipping without useful alt text.
What Is Alt Text and What Does the Alt Attribute Do?
The alt attribute lives on the <img> element in HTML, as in <img src="chart.png" alt="Quarterly revenue by region">. When the image loads, the alt text is usually invisible. When the image cannot be seen - because a person uses a screen reader, the file fails to load, or a bot or AI model needs context - the alt text becomes the image's meaning. That single attribute is the only standard, in-markup place to say what a picture represents.
What Are the Three Jobs Alt Text Does at Once?
Alt text is unusual because one short string serves three audiences. First, it is an accessibility bridge: screen readers read the alt text aloud so blind and low-vision users get the same information sighted users see. Second, it is an image-search signal: search engines cannot see pixels, so the alt attribute and surrounding context are how they infer what an image shows and when to surface it. Third, it is grounding for multimodal AI search: modern AI overviews and answer engines ingest page text, and a well-written alt attribute gives them a clean, factual description of the image instead of a guess.
How Do You Write Alt Text That Works?
Start from the image's purpose on the page. Ask: if the image were removed, what sentence would replace it? Write that. Be specific and concise, name the subject, and include any text shown in the image that matters. If the image is a link, the alt text should describe the destination, not the picture. If the image carries no information, use empty alt text. The goal is equivalent meaning, not a full visual description.
What Do Good and Bad Alt Text Examples Look Like?
Weak alt text tends to be vague, stuffed, or redundant. Strong alt text states the subject and relevance. Consider a product photo of a standing desk: alt="image of desk" is vague; alt="Walnut standing desk at mid-height next to a chair" tells the user what they are looking at. For a chart, alt="chart" is useless; alt="Bar chart: Q2 revenue rose 18 percent in the EU region" conveys the takeaway. The pattern is consistent: name the thing, then the detail that matters.
How Should You Handle a Product Photo?
A product photo usually exists to show the item and its key attributes. The alt text should name the product and the variant or detail visible: color, angle, configuration, or included parts. Avoid marketing fluff and avoid repeating the product name from the heading unless the heading is absent. The alt attribute is for the image, so describe what that specific photo shows.
What About Charts, Data Visualizations, and Screenshots?
For a chart or data visualization, the alt text should state the type of visual and its main conclusion, not every axis label. The detailed data belongs in the body copy or a data table, not buried in alt text. For a screenshot of a UI, name the screen and the element the screenshot is meant to highlight, such as a settings toggle or a report view. The alt text points the reader to what to notice.
How Do You Write Alt Text for Logos and Decorative Images?
A logo that links to the homepage should have alt text naming the company and the action, such as alt="Stackmatix home". A decorative logo used only for branding in a header, with a visible site name nearby, can use empty alt text so it is skipped. Decorative images alt handling follows one rule: if the image adds no information beyond what text already says, use alt="" so assistive tech stays silent.
What If an Image Is Used as a Link?
When an image is the only content inside a link, the alt text must describe the destination, because that is what the user activates. A clickable banner to a pricing page should read alt="Pricing" or alt="View pricing plans", not alt="banner". If the link also contains visible text, the image can use empty alt text to avoid double reading.
How Long Should Alt Text Be?
Alt text length should match the image's information. A simple icon needs a word or two; a complex infographic needs a sentence that captures the point. As a practical guide, keep most alt text under about 125 characters so it is comfortable when read aloud and less likely to be truncated by tools. Length is a means to clarity, not a target - if you need a paragraph, the information probably belongs in the body copy instead.
What Is the Difference Between Alt Text, Title, Caption, Filename, and Body Copy?
These are often confused but do different jobs. The alt attribute is the text alternative announced when the image is not seen. The title attribute is an optional tooltip and is not reliably read by screen readers, so do not use it as a substitute for alt. A caption is visible text beneath the image and can add context but does not replace alt. The filename helps organization and image search marginally, while surrounding body copy gives topical context. Use alt for the alternative; use a caption when readers benefit from visible explanation.
Which Alt Text Rule Applies to Each Image Type?
| Image type | What the alt text should say | Example string |
|---|---|---|
| Product photo | Product name and the visible variant or key detail | alt="Walnut standing desk at mid-height" |
| Chart or data viz | Visual type and its main takeaway | alt="Bar chart: Q2 revenue up 18 percent in EU" |
| Screenshot of a UI | Screen name and the highlighted element | alt="Settings screen with analytics toggle enabled" |
| Logo as a link | Company and destination or action | alt="Stackmatix home" |
| Decorative image | Nothing; mark it empty | alt="" |
| Image used as a link | The link destination, not the picture | alt="View pricing plans" |
| Infographic | One sentence stating the conclusion | alt="Infographic: alt text improves accessibility and AI search grounding" |
What Mistakes Actually Cause Harm?
Several common errors make alt text worse than none. Keyword stuffing crams unrelated terms and reads as spam to users and engines. The "image of" or "picture of" prefix is redundant because assistive tech already announces it is an image. Duplicating the caption adds no new meaning and creates double reading. Leaving alt missing on informative images is the most damaging default: screen readers may read the filename or skip the image entirely. Finally, CSS background images cannot carry an alt attribute, so any meaningful background image should be moved to an <img> element or described in nearby text.
Why Does Alt Text Matter for SEO and AI Search?
Alt text for SEO is not a ranking lever you can crank; it is a relevance and context signal. Search engines use the alt attribute to understand images and to match them to queries about those images. For AI-search grounding, the mechanism is similar: answer engines parse page text, and a precise alt attribute gives them an accurate description instead of a guess based on pixels. The win is being understood correctly, not being rewarded with a number.
How Can You Audit Alt Text at Scale?
Auditing starts with a crawl that lists every <img> on the site alongside its alt value. Export the pairs to a spreadsheet and filter for three problems: missing alt on images that carry information, non-empty alt on images that are purely decorative, and alt text that is vague, stuffed, or duplicated from the caption. For large sites, script the crawl so it runs on a schedule and flags regressions. The output is a prioritized list: fix informative images with missing alt first, then trim stuffed or redundant alt.
How Do You Operationalize Alt Text in a CMS Workflow?
The durable fix is a workflow, not a one-time cleanup. Make the alt field required for any image marked "informative" in the CMS, and default decorative images to empty alt. Add a validation step in the publish pipeline that blocks informative images without alt text. Train editors with a short internal guide and the rules table above. Review alt coverage in the same periodic audit you use for the rest of on-page quality, so new images never ship bare.
What Is a Simple Step-By-Step for Writing Alt Text?
- Identify the image's job on the page: inform, decorate, or link.
- If it is decorative, set alt text to empty (
alt=""). - If it is informative, write one sentence that replaces the image for someone who cannot see it.
- If it is a link, describe the destination instead of the picture.
- Trim filler words, "image of" prefixes, and stuffed keywords.
- Confirm the length is comfortable to read aloud and the meaning is clear.
Frequently Asked Questions
What Is Alt Text?
Alt text is the value of the HTML alt attribute on an image element. It is a short text alternative that describes what the image shows or, for a linked image, where it leads. Screen readers announce it, search engines use it to understand the image, and AI systems use it as grounding text. When the image is purely decorative, the correct value is an empty string so the image is skipped.
How Long Should Alt Text Be?
Alt text should be as long as the image's meaning requires and no longer. Most informative images are clear in under about 125 characters, which keeps them comfortable when read aloud and avoids truncation. A complex infographic may need a full sentence that states its conclusion. If you need a paragraph, the detail probably belongs in the visible body copy rather than in the alt attribute.
Should Decorative Images Have Alt Text?
No. Decorative images that add no information beyond nearby text should use empty alt text, written as alt="". This tells assistive technology to ignore the image instead of announcing a useless filename or a redundant description. Examples include spacing graphics, ornamental borders, and logos where the site name is already visible. The empty value is intentional, not a missing field.
Is Alt Text the Same as a Caption?
No. Alt text is an attribute read when the image cannot be seen; it is usually invisible on the page. A caption is visible text below or beside the image that adds context for all readers. They serve different audiences, so a caption does not replace alt text, and alt text should not be padded to act as a caption. Use both when each adds value, but keep the alt attribute focused on the alternative.
Does Alt Text Help AI Search?
Yes, indirectly. AI answer engines and multimodal search systems parse the text of a page to understand its content, and the alt attribute gives them a clean, factual description of each image. Without it, they must infer meaning from pixels or surrounding copy, which is less reliable. The benefit is correct grounding and fewer misread images, not a guaranteed ranking boost.