Alt Text Examples

Empty alt text (alt="") tells screen readers to skip the image. Use it for decorative images that add no information.

Alt text is the short HTML text used to describe an image's content or function for screen readers and other assistive technologies.

Beginner5 min readUpdated 2026-07-27Notes by Callum Bennett

Start here

Alt text improves accessibility for visually impaired users and helps search engines understand images.
Keep alt text short (under 150 characters) and descriptive, not generic.
Never start with "image of" or "picture of."
Use empty alt text for decorative images.
For linked images, describe the destination or action.

Alt text is a small HTML attribute that makes a big difference for both accessibility and SEO.

Image: A photo of a golden retriever puppy sitting on a green lawn, holding a red ball in its mouth.

Good alt text: "Golden retriever puppy holding a red ball on grass."

Bad alt text: "Dog" (too generic) or "cute puppy playing outside" (vague, no detail).

Every meaningful image on your website should have descriptive alt text.
Linked images (e.g., logo linking to homepage) need alt text describing the destination.
Image buttons (e.g., "Submit" or "Search" icons) need alt text that explains the action.
Complex images like charts or infographics need alt text summarizing the key insight, plus a longer description nearby.

Not a caption: Captions are visible text; alt text is hidden and read by screen readers.
Not a title attribute: The title attribute provides extra info on hover, not a replacement for alt text.
Not a keyword dump: Alt text should describe the image naturally, not stuff keywords.
Not optional for decorative images: Use empty alt text (alt="") to skip them, not omit the attribute entirely.

Identify the image's purpose — what information or function does it convey?
Describe the image concisely — use 1–2 sentences, under 150 characters.
Avoid starting with "image of" or "picture of" — screen readers already announce it's an image.
Use keywords naturally — only if they fit the description.
For linked images, describe the link destination — e.g., "Searchpedia homepage" for a logo link.
For decorative images, use alt="" — this tells screen readers to skip them.

Too generic: "Photo" or "image" — adds no value.
Keyword stuffing: "Buy cheap running shoes online — best deals" — unnatural and penalized.
Repeating nearby text: If the paragraph already says "The CEO spoke at the conference," don't repeat it in the alt text.
Missing alt text on meaningful images: Leaves screen reader users without context.
Using alt text on decorative images: Clutters the experience — use alt="" instead.

What is alt text?

Alt text is an HTML attribute added to an image tag that provides a text description of the image for screen readers and search engines.

How long should alt text be?

Keep alt text under 125–150 characters, usually one or two short sentences.

Should I use keywords in alt text?

Only use keywords naturally if they describe the image. Do not keyword stuff.

What is empty alt text?

Empty alt text (alt="") tells screen readers to skip the image. Use it for decorative images that add no information.

Primary documentation is linked directly. Anything commercial is marked nofollow.

Google Search Central — Google's guidance on image SEO and helping search systems understand image content.
Google Technical Writing: Write helpful alt text — Clear, practical guidance on concise, contextual alt text.
WebAIM: Alternative Text — Widely cited accessibility guidance on accurate, succinct alt text.
W3C WCAG Technique H37 — Standards-based examples for meaningful alternative text.
Section 508: Authoring Meaningful Alternative Text — Government accessibility guidance on concise, context-aware alt text.