Alt text is the short written description stored in an image's alt attribute in HTML. It tells screen reader users what an image shows or does, and it helps search engines understand the image's subject.
This page covers where alt text comes from, why it matters for accessibility and image SEO, how to handle different kinds of images, an example, a practical process, and the mistakes that trip up even experienced teams.
What is Alt Text?
In HTML, an image is usually added with an img element, and the alt attribute holds its text alternative, for example alt="Dalmatian puppy playing fetch". People often call it an "alt tag," but technically it is an attribute, not a tag.
Alt text exists first for accessibility. The W3C's Web Content Accessibility Guidelines (WCAG) include Success Criterion 1.1.1, Non-text Content, a Level A requirement that non-text content such as images has a text alternative serving the same purpose. Screen readers announce that text, and browsers display it when an image fails to load.
Search engines also rely on it. Google's image SEO best practices describe alt text as the most important metadata attribute for images, used together with computer vision and the surrounding page content to understand what an image is about.
Why Alt Text matters
Accessibility. Without alt text, a screen reader may read out the file name or simply say "image," leaving users to guess. For images that are links or buttons, missing alt text can make a control impossible to use. Accessibility is also a legal consideration in many regions, though the specifics depend on your location and industry.
Image search and page context. Google says it uses alt text to understand image subjects, and when an image is a link, its alt text works like anchor text for that link. Descriptive alt text can help images appear in Google Images and in visual results.
AI and multimodal search. As multimodal search grows, systems analyze images directly, so alt text is one signal among several rather than the only one. Clear, accurate alt text still removes ambiguity about what an image represents.
The honest limit: alt text is not a big ranking lever for your page as a whole. Its main jobs are making images accessible and helping images themselves be understood.
How Alt Text works
Informative images
Photos and illustrations that convey information need a short description of that information. The W3C's images tutorial stresses that the right description depends on context: the same picture may need different alt text on different pages.
Decorative images
Images that are purely visual, such as background flourishes or dividers, should use an empty alt attribute (alt="") so screen readers skip them. Leaving the attribute out entirely is different: the W3C's decorative images guidance notes that some screen readers then announce the file name instead.
Functional images
When an image is a link or button, describe what it does, not what it looks like. A magnifying glass icon on a search button should say "Search," not "magnifying glass."
Images of text and complex images
If an image contains words, the alt text should include those words, unless the same text already appears nearby. Charts and diagrams need a short alt plus a fuller description or data table elsewhere on the page. The W3C's alt decision tree walks through these choices.
What Google needs technically
Google indexes images placed with standard HTML img elements, including inside picture elements, but not CSS background images. It also recommends descriptive file names, placing images near relevant text, and avoiding keyword stuffing in alt attributes, which it says can be treated as spam.
Alt Text in practice: an example
Picture a hypothetical bakery's product page for a lemon blueberry cake. Here are four versions of the main image's alt text:
- Missing: no alt attribute. A screen reader may read "IMG_4821.jpg."
- Stuffed: "cake lemon cake blueberry cake best cake bakery cake order cake online." Unhelpful to people and a spam risk.
- Vague: "cake." Better, but it does not distinguish this product.
- Useful: "Two-layer lemon blueberry cake with cream cheese frosting, sliced to show the filling." Accurate, specific, and natural.
On the same page, a decorative leaf graphic beside the heading would get alt="", and the shopping cart icon would get "View cart."
How to write and fix Alt Text
- Audit your images. Use a site crawler or accessibility checker to find images with missing or empty alt attributes, and note which are decorative.
- Decide each image's purpose. Classify it as informative, decorative, functional, text, or complex, since each needs a different approach.
- Describe what matters in context. Ask what someone who cannot see the image would need to know at that spot on the page.
- Keep it concise and natural. A short phrase or sentence usually works. Skip "image of" or "picture of," since screen readers already announce it is an image.
- Use keywords only when accurate. If the image genuinely shows your product or topic, naming it is fine. Do not add terms the image does not show.
- Support with good technical setup. Use real img elements, descriptive file names, and place images near related text, following Google's guidance.
- Build it into your workflow. Make alt text a required field in your CMS for new uploads and update it when images change.
Common mistakes and misconceptions
"Every image needs a description." Decorative images should have an empty alt attribute. Describing them adds noise for screen reader users.
"Alt text is a place for keywords." Google explicitly warns against stuffing alt attributes. Write for the person, and relevant terms will usually appear naturally.
"Placeholder alt text like 'image' or 'spacer' is fine for decorative images." It is not. WCAG lists placeholder text on decorative images as a failure, because screen readers still announce it. Use an empty alt attribute instead.
"AI-generated alt text is good enough." Automated tools can describe what is in an image but often miss why it is on the page. Review generated text, especially for functional and informative images.
Alt Text vs. image captions
A caption is visible text shown to everyone, usually below the image. Alt text is hidden from sighted users and read by assistive technology or shown when the image fails to load. If a caption already fully describes an image, the alt text can be shorter so screen reader users do not hear the same thing twice.
How Butter approaches Alt Text
We treat alt text as part of basic site quality. In SEO audits, we flag missing or stuffed alt attributes, images hidden in CSS that Google cannot index, and generic file names, then recommend fixes in priority order.
For clients on our GEO plans, which start at $399/month, image guidance is part of the on-page recommendations. Fundamentals first: accurate, human-written alt text helps real people, and that is the same thing search engines are trying to reward.
Frequently asked questions
How long should alt text be?
Long enough to convey the image's purpose, which is usually a short phrase or one sentence. There is no official character limit in WCAG, but very long descriptions are better placed in a caption or on the page.
Does alt text help SEO?
Yes, mainly for images. Google says alt text helps it understand image subjects and acts as anchor text when an image is a link, which can help images appear in Google Images.
Should decorative images have alt text?
They should have an alt attribute that is empty, written as alt="". This tells screen readers to skip the image, while leaving the attribute out entirely can cause them to read the file name.
What is the difference between alt text and an alt tag?
They mean the same thing in everyday use. Technically, alt is an attribute of the img element, so "alt attribute" or "alt text" is the more accurate term.