You know you're supposed to fill in the alt text field. Every SEO checklist says so, every CMS nags you about it, and every accessibility audit flags the images you skipped. So you write something — usually the filename, or "image1", or a rushed sentence that just repeats the caption. It feels like a formality, so it gets treated like one.
The problem is that alt text isn't decoration for your HTML — it's the only way a screen reader user knows what's in the image, and one of the only ways a search engine understands it too. Written well, it does real work. Written as an afterthought, it does nothing for anyone and can actively confuse both audiences.
Good alt text describes what's meaningfully in the image, in plain language, in under
about 125 characters — without starting with "image of" or stuffing in keywords. Purely
decorative images should use an empty alt attribute (alt="") so screen
readers skip them. This same discipline helps both accessibility compliance and image
search visibility, since search engines rely on alt text to understand content they
can't visually interpret.
What actually makes alt text good?
Alt text lives in the alt attribute of an <img> tag. It's
invisible on a normally loading page, but it becomes the entire experience of that image
for two audiences: screen reader users, and search engine crawlers. Good alt text earns its
place with a few consistent traits:
- Describes function, not just appearance. What matters is why the image is there. A photo of a red running shoe on a product page needs "red running shoe" plus whatever detail is relevant — color, style, angle — not just "shoe."
- Stays short and specific. One clear sentence, roughly 100–125 characters, beats a long paragraph that a screen reader cuts off or a visitor never reads anyway.
- Skips redundant phrasing. Screen readers already announce "image" before reading the alt text, so "image of," "picture of," and "photo showing" add nothing but noise.
- Reflects context, not just content. The same photo can need different alt text depending on where it appears — a hero banner versus a detailed product spec image serve different purposes even if it's the same file.
- Uses empty alt for decoration. Purely visual elements — dividers, background patterns, spacer icons — should carry
alt=""so assistive tech skips them instead of reading a meaningless filename aloud.
The key insight: alt text is written for a person who cannot see the image at all, not for a search engine skimming keywords. Get that audience right, and the SEO benefit follows naturally as a side effect.
Why alt text matters
Alt text sits at the intersection of accessibility and search visibility, which is why it keeps showing up on both accessibility audits and SEO checklists:
- Accessibility and legal compliance. Screen reader users rely entirely on alt text to know what an image contains. Missing or meaningless alt text is one of the most common failures cited in WCAG accessibility audits and related legal complaints.
- Image search visibility. Search engines can't "see" an image the way a person can — alt text, surrounding copy, and file context are the main signals they use to index it under relevant image search queries.
- Broken image fallback. When an image fails to load — a slow connection, a broken link, a blocked CDN — the alt text displays in its place, so visitors still get the information the image was meant to convey.
- Context for search engines about the page itself. Alt text contributes a small amount of topical context that helps search engines understand what the surrounding page content is about, alongside headings and body text.
Step-by-step: writing alt text that works
- Ask what the image is doing on the page. Is it informative, functional (like a button icon), or purely decorative? The answer decides whether it needs real alt text, brief functional text, or an empty attribute.
- Describe what's meaningfully visible. Focus on the details a sighted visitor would actually notice and use — subject, action, relevant color or setting — not every visual element.
- Keep it to one clear sentence. Target roughly 100–125 characters. If you need more detail than that, put the extra context in the surrounding body text instead of cramming it into the attribute.
- Skip "image of" and keyword stuffing. Go straight to the description, and never list multiple keyword variations hoping one will rank — write for the one person listening, not an algorithm.
- Use alt="" for decorative images. If removing the image would lose zero information, mark it decorative with an empty alt attribute rather than leaving it out or filling it with a filename.
- Match alt text to the image's role on that specific page. A photo reused across a gallery, a product page, and a blog post may deserve different alt text in each place, based on what's relevant there.
- Check it in isolation. Read the alt text alone, without seeing the image, and ask whether it would make sense to someone who can't see it at all. If it wouldn't, rewrite it.
Common mistakes that waste alt text
1. Leaving it as the filename
"IMG_4821.jpg" or "product-photo-final-v2.jpg" tells a screen reader user nothing, and it tells search engines almost as little. If the alt attribute is left blank by accident rather than intentionally, most CMS platforms will fall back to the filename automatically — which is worse than no image at all for a screen reader user.
2. Keyword stuffing
Cramming multiple keyword variations into one alt attribute — "red running shoes mens athletic sneakers trainers buy online" — reads as gibberish to a screen reader and provides no additional SEO benefit over one accurate, specific description.
3. Repeating the caption word for word
If a visible caption already says "A hiker crossing a rope bridge in Nepal," identical alt text adds nothing new. Alt text and captions can describe the same image, but they serve different readers and can carry slightly different emphasis without contradicting each other.
4. Skipping decorative images entirely
Leaving the alt attribute off completely, rather than setting it to an empty string, can
cause some screen readers to announce the filename or URL instead of staying silent. An
explicit alt="" is the correct way to mark an image as decorative.
Real-world alt text examples
Seeing the difference side by side makes the pattern obvious — these are the same images described poorly and described well:
The pattern is consistent: specificity and context do almost all of the work, dropping filler phrases costs nothing, and marking truly decorative images as decorative keeps the experience clean for screen reader users instead of cluttered.
Comparison: which approach actually helps?
Not every alt text habit is equally useful. Here's how the common approaches stack up:
| Approach | Accessibility value | SEO value | Effort | Best for |
|---|---|---|---|---|
| Specific, contextual description | High | High | Low–Medium | Nearly every informative image |
| Empty alt ("") for decorative images | High | Neutral | Low | Dividers, backgrounds, spacer graphics |
| Filename left as-is | None | Low | None | Nothing — always fix this |
| Keyword-stuffed alt text | Poor | No added benefit | Medium | Nothing — avoid this pattern |
| Caption duplicated exactly | Redundant | Neutral | Low | Only when the caption is already ideal alt text |
| Functional alt for interactive images | High | Neutral | Low | Icon buttons, linked logos, image links |
Free tool: Heading Hierarchy Analyzer
Alt text is one half of a well-structured, accessible page — heading order is the other. The Rebrixe Heading Hierarchy Analyzer scans any page and flags skipped levels, multiple H1s, and out-of-order headings, the same kind of structural issue that quietly undermines both accessibility and SEO alongside missing alt text. It runs entirely in your browser, with no account and no file limits.
Fix your heading structure in seconds
Paste in a URL or your page HTML and instantly see every heading level, out of order or missing, laid out clearly.
Frequently asked questions
alt="") rather than no attribute at all. This
tells screen readers to skip the image silently instead of announcing a meaningless
filename.