What is alt text and where does it live?
So what is alt text? Alt text (short for "alternative text") is the alt attribute on an HTML <img> tag — a short written description of what the image shows. It exists so that anyone or anything that cannot see the image still understands it: a screen reader reads it aloud to a blind user, a browser displays it when the image fails to load, and a search engine uses it to figure out what the picture is about.
In code it looks like this:
<img src="golden-retriever-puppy.jpg" alt="A golden retriever puppy sitting in tall grass">
The src is the file the browser fetches; the alt is the fallback meaning. If the connection drops, the file 404s, or the user is on a screen reader, the alt text is all that survives — so it has to carry the image's purpose on its own.
Alt text is one of the oldest accessibility features on the web and it has quietly become an SEO signal too. Because Google cannot actually "see" a photo the way a person does, the alt attribute is one of the strongest clues it has about an image's subject — which is why it shows up in nearly every image-optimization and technical SEO checklist.
Why alt text matters for SEO and accessibility
Alt text matters for two audiences at once: people using assistive technology and the crawlers that index your site. Getting it right serves both, which is rare in SEO.
- Accessibility. Around one in forty people worldwide lives with a visual impairment, and many browse with a screen reader that announces each image by reading its alt text. An image with no alt is announced as a meaningless "image" or, worse, by reading the file name aloud. Good alt text is the difference between a usable page and a confusing one — and in many regions (ADA, WCAG, the European Accessibility Act) it is a legal requirement, not a nicety.
- Image SEO. Descriptive alt text helps your images rank in Google Images and Google Lens, which drive real traffic for recipe, product, travel, and how-to content. It is the primary text signal Google associates with a picture, so it directly affects which searches surface your image.
- Context for the whole page. Search engines and AI answer engines read alt text as part of understanding the page's topic, not just the image. Relevant, natural alt text reinforces what a page is about — one more signal that the content matches a query.
- A fallback when images break. Slow connections, blocked hotlinks, and broken CDNs all happen. When the image will not load, the alt text renders in its place so the page still makes sense.
Alt text is the rare optimization where doing the accessible thing and the SEO thing are the same thing. Write it for the human using a screen reader and the search benefit follows.
How to write good alt text (with examples)
Good alt text describes the image accurately and concisely, in plain language, as if you were describing the picture to someone on the phone. Aim for a short phrase — roughly 5 to 15 words — that captures what matters about the image in context.
Follow these rules:
- Be specific and descriptive. "A barista pouring latte art into a white ceramic cup" beats "coffee." Describe what is actually in the frame.
- Skip "image of" and "picture of." Screen readers already announce that it is an image, so those words waste the listener's time. Start with the subject.
- Keep it concise. If you need two sentences, the detail probably belongs in a caption or the body text, not the alt.
- Use keywords naturally, and only when they fit. If your target term genuinely describes the image, include it. Never stuff keywords — Google treats stuffed alt text as spam, and it makes the page hostile for screen-reader users.
- Match the context. The same photo of a shoe might be "red running shoe" on a gallery page and "Nike Pegasus 41 in crimson, side profile" on a product page. Describe what is relevant to that page.
- Do not repeat nearby text. If a caption already names the image, the alt text should not just echo it word for word.
Here is how good and bad alt text compare on the same images:
| Image | Bad alt text | Good alt text | Why |
|---|---|---|---|
| A product photo of a red running shoe | "shoe" | "Red Nike Pegasus running shoe, side profile" | Specific and describes what the buyer sees |
| A team photo in an office | "image of our team" | "Six-person marketing team standing in the office lobby" | Drops the "image of" filler, describes the scene |
| A bar chart of monthly traffic | "chart.png" | "Bar chart showing organic traffic rising from 2k to 9k over six months" | Conveys the data, not just that it is a chart |
| A keyword-stuffed example | "cheap shoes buy shoes running shoes best shoes" | "Red running shoe on a white background" | Natural description; stuffing reads as spam |
| A decorative divider line | "line" | "" (empty alt) | Purely decorative, so screen readers should skip it |
For a deeper walkthrough of file names, compression, and dimensions alongside alt text, see how to optimize images for SEO.
Alt text vs. title attribute vs. file name
These three are easy to confuse because they all attach text to an image, but they do different jobs. Only one of them — the alt attribute — is essential.
- Alt text (`alt`) is the accessible, indexable description. Screen readers announce it and search engines index it. This is the one that matters.
- Title attribute (`title`) produces the little tooltip that appears when you hover a mouse over the image. It is not reliably announced by screen readers, is invisible on touch devices, and carries little to no SEO weight. Treat it as optional decoration, never as a substitute for alt.
- File name (red-running-shoe.jpg vs. IMG_4821.jpg) is a minor secondary signal. Descriptive, hyphen-separated file names help a little, but they are far weaker than alt text. Rename files where it is easy; do not obsess over it.
The practical takeaway: always write the alt, give descriptive file names when convenient, and mostly ignore the title attribute. As part of your broader on-page SEO, alt text does the heavy lifting.
When to leave alt text empty (decorative images)
Not every image needs a description. When an image is purely decorative — it adds no information and exists only for visual styling — the correct move is an empty alt attribute: alt="". This is intentional and correct, not a mistake.
An empty `alt` (alt="") tells a screen reader to skip the image entirely, so the user is not interrupted by a pointless announcement. Use it for background flourishes, decorative dividers, spacer graphics, and icons that sit next to text that already says the same thing.
A missing `alt` (no attribute at all) is different and worse: many screen readers fall back to reading the file name aloud, so a user hears "I-M-G underscore 4 8 2 1 dot j-p-g." Always include the attribute — either with a real description or deliberately empty.
The quick test: does the image convey information the surrounding text does not? If yes, describe it. If it is there only to look nice, give it alt="". Informative images (charts, product photos, diagrams, screenshots) always earn a real description; a divider line never does.
The fastest way to find images missing alt text across a whole page is to run a free SEO + GEO audit — paste any URL and it flags every image with a missing or empty alt attribute, alongside the rest of your on-page and Core Web Vitals checks. It is a good habit to pair with your regular SEO-friendly content workflow so nothing ships without a description.