The alt attribute on <img> elements is one of the simplest things to do well in HTML, and one of the most-skipped. Done right, it makes images work for blind users, indexable by Google Image Search, and visible (as text) to anyone whose image fails to load. Done wrong — left empty, or filled with keyword soup — and the image effectively disappears for screen readers and gets penalised for SEO.
This guide covers what alt text is, what to write for different image types, the conventions that actually work in 2026, and how to audit your existing images at scale.
What Alt Text Is For
Three audiences:
- Screen reader users. Software reads the alt text aloud when the user encounters the image. For blind users, alt is the image — the only way they experience it.
- Search engines. Google's image index uses alt text as a strong signal for what the image depicts. Image search traffic is real; alt text is how you earn it.
- Sighted users when images fail. Slow networks, broken URLs, or content blockers can prevent images loading. The browser shows the alt text as a fallback.
One sentence per image, serving all three. The only thing required is that it actually describes what the image conveys in context.
The Decision Tree
For every image, ask: does this image add information to the page?
- If yes: write alt text describing the information.
- If no (decorative — used for visual rhythm but not adding meaning): use empty alt (
alt="") so screen readers skip it.
Empty alt is not the same as missing alt. alt="" tells screen readers to ignore the image. No alt attribute at all is an error — screen readers may read out the filename, which is usually nonsense ("IMG underscore 4 5 6 dot J P G").
Examples by Image Type
Photograph illustrating an article
<img src="/photos/sunset.jpg" alt="Sunset over the Pacific Ocean from the Oregon coast">Describe what's in the image and what makes it relevant to the article. Don't say "image of" or "photograph of" — screen readers already announce that the element is an image.
Decorative image (visual filler)
<img src="/decoration/divider-flourish.svg" alt="">Empty alt. The image isn't conveying meaning; it's just visual styling.
Logo
<img src="/logo.svg" alt="Acme Bank">The brand name. Don't say "Acme Bank logo" — the surrounding context already implies it's a logo.
Icon used inside a button
<button>
<img src="/icons/search.svg" alt="" aria-hidden="true">
Search
</button>If the button has a text label, the icon is decorative — empty alt. If the button is icon-only:
<button aria-label="Search">
<img src="/icons/search.svg" alt="">
</button>Use aria-label on the button itself. The icon's alt stays empty.
Chart or data visualisation
<img src="/charts/q3-revenue.png"
alt="Revenue grew from $1.2M in Q1 to $1.8M in Q3 2026, with the largest increase between Q2 and Q3.">Charts need alt text that conveys the actual finding. "Revenue chart" is useless for a screen reader user — they need to know what the chart says. Long alt text is fine here; charts genuinely contain information that takes a sentence to summarise.
Product image (e-commerce)
<img src="/products/blue-widget.jpg" alt="Blue widget, side view, with USB-C port visible">Describe the specific product variant shown. Don't repeat the product name (it's typically already in the page); add what the image specifically shows.
Hero image at the top of a blog post
<img src="/posts/intro-image.jpg" alt="Developer's desk with multiple monitors showing code">If the image relates to the post's topic, describe it briefly. If it's purely stock-photo decoration, empty alt may be appropriate.
What Alt Text Is Not
It's not the place for keywords
Stuffing keywords into alt text was an SEO tactic in 2010. Now it's penalised by Google's image algorithms and read aloud as gibberish to screen reader users. Write alt text that describes the image; if keywords fit naturally, fine — if not, don't.
BAD: alt="seo audit tool meta tag checker free seo tool 2026 best"
GOOD: alt="Meta Tag Checker dashboard showing analysis of a sample URL"It's not the caption
If you have a visible caption (a <figcaption> element), the alt text and caption should not duplicate each other. The caption is read aloud by default; the alt text should add what the caption omits, or be empty if the caption fully conveys the image's meaning.
It's not a description of every visual detail
"Photograph of a man, approximately 35-45 years old, wearing a blue shirt, holding a coffee cup, standing in a kitchen with white cabinets" is too much. Focus on what's relevant to the page's context. If the page is about kitchen design, the kitchen is what matters.
It's not "image", "photo", "picture", "graphic"
Screen readers already announce that the element is an image. Saying "image of..." is redundant. Just describe what's there.
Length
Practical limits:
- Most images: 5–15 words is the sweet spot.
- Charts/diagrams: 25–50 words to actually convey the information.
- Complex infographics: use
aria-describedbypointing to a longer text description elsewhere on the page; keep alt text to a brief summary.
HTML doesn't enforce a limit, but most screen readers won't pause for excessively long alt text — users have usually moved on by sentence three.
Common Mistakes at Scale
Empty or missing alt across the entire site
The most common pattern. WordPress sites where authors don't fill in the alt field produce hundreds of images with no alt. Audit and bulk-fix.
Filename as alt text
"DSC_4567.jpg" or "screenshot-2026-04-15.png" appearing as alt text. Worse than empty alt — screen readers read the filename aloud. Always replace with a real description.
Same alt across many similar images
Product galleries where every image has alt="product image". Each variant of the product (different colour, angle, view) should have specific alt distinguishing them.
Alt that describes the wrong thing
The image was changed but alt wasn't updated. Common when CMS templates reuse images. Image of a kitchen with alt "modern living room sofa" — happens more than you'd think.
Decorative images with descriptive alt
Background visual flourish with detailed alt — "ornate decorative divider with floral motif". Just use empty alt; the description doesn't help anyone.
Important content as image text without alt
A button rendered as an image of text ("Sign Up Today"), with alt="" or no alt. The actual content of the button is invisible to screen readers and to search engines. Either set alt to the text content, or render the text as actual text in HTML.
Auditing Your Site
Several tools surface alt text issues:
- Meta Tag Checker reports images missing alt on any page.
- WAVE accessibility tool (browser extension) highlights every image's alt status visually.
- Lighthouse / accessibility audit in Chrome DevTools flags missing alt.
- Screaming Frog or similar crawlers can extract every image and its alt across an entire site for bulk auditing.
Once you have a list of images missing alt, prioritise:
- Hero/lead images (highest visibility).
- Images on top-traffic pages.
- Images that are part of the main content (charts, product photos).
- Decorative/template images (often resolved by template change rather than per-image fix).
The Production Habit
Whenever you publish an image:
- If it's decorative: explicit
alt="". - If it's content: a short, specific description in your own words.
- If it's a chart: convey the actual finding.
- Don't repeat what's already in the surrounding text.
- Don't stuff keywords.
One sentence per image, written intentionally, makes the difference between a site that's accessible and a site that pretends to be. Meta Tag Checker handles the audit; the writing is on you.