Alt text (alternative text) is a short written description of an image, added to the HTML alt attribute. Screen readers speak it aloud for blind and low-vision users, search engines read it to understand what the image shows, and browsers display it when the image cannot load. Keep it under 125 characters and describe the meaning, not the pixels.
Alt text is the smallest piece of SEO and the biggest piece of accessibility. A single sentence per image serves two audiences at once — the users depending on assistive tech and the search engines trying to understand what your page shows.
What is alt text?
Alt text is a string of text added to an <img> tag through the alt attribute. It gives a text-only version of the image for anyone or anything that cannot see it.
The alt attribute has three jobs:
- Accessibility — screen readers announce the alt text so blind and low-vision users understand the image
- SEO — Google and Bing use alt text as one of the strongest signals for what an image contains
- Fallback — browsers display the alt text when an image fails to load, when a user disables images, or on very slow connections
WebAIM's 2024 Million audit tested the top one million homepages. It found 21.8% of images had missing or empty alt text, and that missing alts were the most common accessibility failure across the entire dataset — ahead of contrast, form labels, and keyboard traps.
Why alt text matters
- Accessibility compliance. WCAG 2.2 Success Criterion 1.1.1 requires text alternatives for all non-decorative images. Missing alts drive ADA-related web lawsuits — 4,000+ filed in the US in 2024.
- Google Images ranking. Alt text is one of the top three signals Google uses to rank images.
- Contextual page relevance. Alt text contributes to on-page keyword context beyond just image search.
- User experience on slow connections. Users on flaky mobile networks see alt text before images load.
- AI ingestion. Language models parse alt text as part of the page's semantic content.
How alt text works
When a browser encounters an <img> tag, it reads the alt attribute, then decides what to do based on context.
Screen reader flow
A screen reader like NVDA, JAWS, or VoiceOver reaches the image, announces "graphic," speaks the alt text, then moves on. If the alt is empty (alt=""), the image is skipped as decorative. If the alt attribute is missing entirely, most screen readers read the file name — usually a random string that gives no useful information.
Search engine flow
Googlebot reads the alt text, combines it with surrounding text, page title, and file name, and uses that bundle to understand what the image depicts. The image is indexed for Google Images and contributes to the page's overall topical relevance. Alt text is one input to image SEO; file name, compression, and dimensions carry the rest, and oversized images also drag on Core Web Vitals.
Fallback rendering
If the image URL 404s or the network fails, the browser displays the alt text inside the image placeholder. This is the original 1993 purpose of the attribute.
Types of images and how to alt-text each
| Image type | Approach | Example alt text |
|---|---|---|
| Informational | Describe the meaning | "Line chart showing US search revenue up 34% from 2020 to 2024" |
| Product | Describe the product concisely | "Blue Nike Air Max 90 running shoe, side view" |
| Decorative | Empty alt attribute | alt="" |
| Functional (icon in button) | Describe the action | "Search" or "Add to cart" |
| Complex (chart, diagram) | Short alt + long description in surrounding text | "Sales funnel diagram — see description below" |
| Text-in-image | Repeat the text verbatim | "Sign that says 'Wet paint — do not touch'" |
Real alt text examples
Same image, wrong-to-right progression:
- Bad:
alt="image123.jpg"— literally the file name, useless. - Worse:
alt="dog cute puppy dog dogs pets"— keyword stuffing, harmful to SEO and accessibility. - Better:
alt="Golden retriever puppy"— accurate but generic. - Best:
alt="Golden retriever puppy sitting on grass with a red ball"— describes the meaningful content in context.
Another example — an infographic showing SEO click-through rates by position:
- Ideal alt: "Bar chart: organic CTR by SERP position — position 1: 27.6%, position 2: 15.8%, position 3: 11%, positions 4–10 under 8%. Source: Backlinko 2023 study."
Alt text vs image caption — which to use
They both describe an image. Their audiences differ.
Use alt text when
- Every image needs a text alternative (WCAG)
- Screen readers need to understand context
- Search engines need image content signals
- The image supports the text — not the main event
- You want fallback on failed image loads
Use a caption when
- All users benefit from extra context
- You want a photo credit or source citation
- The image needs explanation for sighted readers
- You want to add editorial commentary
- The alt text and caption can complement, not repeat
7 best practices for writing alt text
- Describe the meaning, not the pixels. "Team celebrating a product launch" beats "12 people around a table with laptops."
- Keep it under 125 characters. Screen readers truncate longer strings.
- Do not start with "image of" or "picture of." Screen readers already announce it is an image.
- Include the target keyword once — if it fits naturally. Never keyword-stuff.
- Use empty
alt=""for decorative images. Skip the empty alt only when the image conveys real meaning. - Match tone to the page. Product page alts stay factual; editorial alts can be more descriptive.
- Audit with a scanner. Axe DevTools, WAVE, and Lighthouse flag missing or empty alts in seconds.
Omitting the alt attribute entirely instead of using alt="" for decorative images. Screen readers respond by reading the image URL — filenames like hero-v2-final-FINAL.jpg get spoken aloud, which is worse than silence.
Common alt text mistakes
- Keyword stuffing. Google explicitly flags alt-text stuffing as a spam signal.
- Omitting alt on non-decorative images. Screen readers announce the file name — an accessibility fail.
- Duplicating the caption verbatim. Repetition wastes screen reader time.
- Using the same alt for every product image. "Product photo" tells nothing.
- Writing alt only in English on multilingual sites. Alts should match the page language.
Frequently asked questions
Aim for 125 characters or fewer. Most screen readers cut off after that. If more detail is needed, put it in the surrounding text or a longdesc attribute rather than in the alt.
No. Decorative images should have an empty alt attribute (alt="") so screen readers skip them. Never omit the attribute — assistive tech will read the file name instead.
Yes. Google uses alt text to understand image content, index images for Google Images, and contribute to page relevance. Well-written alt text also correlates with better rankings for the surrounding text.
Alt text lives in the HTML alt attribute and is spoken by screen readers or displayed when an image cannot load. A caption sits visibly under the image for all users. Both should serve different purposes — no need to duplicate.
Yes. WCAG 2.2 Success Criterion 1.1.1 (Non-text Content) requires a text alternative for every non-decorative image. It is the most-cited accessibility violation in ADA lawsuits — WebAIM's 2024 Million audit found 21.8% of homepages had missing or empty alts on meaningful images.
Related glossary terms
Sources
