What alt text is and why it matters
Alt text (short for "alternative text") is the written description you put in the alt attribute of an HTML <img> tag to explain what the image shows. It exists for two audiences that read it the exact same way: screen-reader software, which announces the alt text aloud to blind and low-vision users, and search-engine crawlers, which read it to understand a picture they cannot see. Alt text also appears in place of an image when the file fails to load.
Alt text matters because an image is invisible to anything that doesn't have eyes on the rendered page. A photo named IMG_4821.jpg with no alt attribute is a blank to a screen reader and a mystery to Googlebot. The alt attribute is the one place you tell both exactly what the picture depicts, which is why it does double duty as your most important accessibility field and your most important image-ranking signal.
Here is the syntax — the alt attribute lives right on the <img> tag:
html
<img src="/img/golden-retriever-puppy.jpg"
alt="Golden retriever puppy sitting in tall grass">Getting alt text right is cheap and high-leverage, and it is a standard line item in any on-page SEO review. The rest of this guide covers how to write it well, when to leave it empty, and the SEO versus accessibility split (which, conveniently, mostly isn't a split at all).
How alt text helps SEO and accessibility at once
Alt text serves SEO and accessibility simultaneously because both consumers read the same attribute for the same purpose: to understand an image without seeing it. This is the rare case where doing the accessible thing and doing the SEO thing are the same action.
On the accessibility side, alt text is a Web Content Accessibility Guidelines (WCAG) requirement. Screen readers like JAWS, NVDA, and VoiceOver read the alt attribute aloud so a blind user knows what the image conveys. A missing or useless alt ("image123") leaves that user with a gap in the page, and it is one of the most common accessibility failures auditors flag.
On the SEO side, alt text is the strongest text signal a search engine has for an image. It helps the image rank in Google Images, gives crawlers context about the surrounding page, and is increasingly pulled into AI Overviews and answer-engine citations that surface visuals. Google's own image guidelines explicitly tell you to write descriptive alt text.
Alt text is the rare field where the accessibility-correct answer and the SEO-correct answer are identical. Write for the screen-reader user and you have already written for the crawler.
The overlap is the whole point: you do not write alt text twice, once for humans and once for robots. You write one literal description and it satisfies both. The only judgment call is whether an image needs alt text at all — which brings us to decorative images.
How to write good alt text
Good alt text is a short, literal, specific description of what an image shows, written as if you were describing the picture to someone over the phone. The goal is that a person hearing it gets the same information a sighted person gets from seeing it. The comparison below shows the difference between alt text that works and alt text that doesn't.
| Image | Bad alt text | Good alt text | Why |
|---|---|---|---|
| Product photo | alt="image" | alt="Blue suede running shoes, side view" | Describes what the image actually shows |
| Photo of people | alt="team team meeting team work team" | alt="Six-person product team at a whiteboard" | Literal description, no keyword stuffing |
| Data chart | alt="chart.png" | alt="Bar chart: 2026 revenue up 40% over 2025" | Conveys the chart's takeaway, not just its type |
| Decorative divider | alt="line graphic decoration border" | alt="" (empty) | Decorative images should be skipped by screen readers |
| Logo | (no alt attribute) | alt="Acme Corp logo" | Missing alt makes readers hear the file name |
| Icon next to a label | alt="magnifying glass search icon" | alt="" (empty) | Adjacent "Search" label already conveys the meaning |
A handful of rules cover almost every case:
- Describe, don't keyword-stuff. "Blue suede running shoes shown from the side" beats "running shoes shoes buy cheap running shoes." Stuffed alt text reads as spam to both screen readers and Google.
- Skip "image of" and "photo of." Screen readers already announce that it's an image, so those words waste the listener's time.
- Be specific. "Bar chart showing 2026 revenue up 40% over 2025" tells the reader the takeaway; "chart" tells them nothing.
- Keep it under ~125 characters. Most screen readers cut off around there. If an image genuinely needs more, use a caption or nearby text instead.
- Include text that's inside the image. If a graphic contains words (a quote, a button label, a slide), put that text in the alt so it isn't lost.
- Add a keyword only when it fits naturally. Alt text is a legitimate place for a relevant keyword, but never at the cost of an accurate description.
Context changes the right answer. The same product photo might be alt="Blue suede running shoes" on a category page and alt="Blue suede running shoes, side view showing the gum sole" on the product detail page, because the detail matters more there. Write for what the image is doing on that specific page.
When to leave alt text empty (decorative images)
Decorative images should have an empty alt attribute — alt="" — not a missing one and not a description. A decorative image is one that adds no information: a background flourish, a divider line, a spacer, or an icon that sits next to text that already says the same thing. Describing it would only clutter the experience for a screen-reader user with noise.
The critical distinction is between an empty alt and a missing alt. An empty alt="" tells assistive technology "this image is decorative, skip it," and the screen reader moves on silently. A missing alt attribute leaves the screen reader guessing — many will read out the file name (hero-bg-final-v2-jpg), which is the worst outcome. Always include the attribute; just leave it empty when the image is decorative.
html
<!-- Decorative: skip it -->
<img src="/img/section-divider.svg" alt="">
<!-- Informative: describe it -->
<img src="/img/team-photo.jpg"
alt="Six-person product team standing in front of a whiteboard">A quick test: ask "if this image disappeared, would the reader lose any information?" If no, it's decorative — use alt="". If yes, write a description. Icons are the common gray area: a magnifying-glass icon inside a button already labeled "Search" is decorative (alt=""), but a standalone star-rating graphic with no adjacent text is informative and needs alt like alt="Rated 4.5 out of 5 stars". Use the decision flow below to route any image to the right answer.
Auditing and fixing alt text across your site
Auditing alt text means finding every image that is missing the attribute, has an empty alt where it shouldn't, or carries a useless description — then fixing each one based on whether the image is informative or decorative. On a site of any size you cannot eyeball this; you scan for it.
- Ask: does the image convey information?If the reader would lose meaning when the image disappears, it is informative; if not, it is decorative.
- Decorative? Use alt=""Add an empty alt attribute so screen readers skip the image instead of reading its file name.
- Informative? Describe it literallyWrite a short, specific description of what the image shows, as if explaining it over the phone.
- Trim and clean upKeep it under ~125 characters, drop "image of" / "photo of," and avoid keyword stuffing.
- Capture any in-image textIf the graphic contains words, include them in the alt so the information is not lost.
- Test with a screen reader or auditRun Lighthouse or tab through with VoiceOver/NVDA to confirm the alt reads correctly.
The fastest checks for spotting alt-text problems:
- Browser DevTools / Lighthouse. Chrome's built-in Lighthouse accessibility audit flags every image missing an alt attribute on a page.
- A crawler. Site-wide tools list all images and their alt status so you can prioritize templates and high-traffic pages first.
- A screen reader. Turning on VoiceOver (Mac) or NVDA (Windows) and tabbing through a page is the truest test of whether your alt text actually makes sense out loud.
Once you have the list, fix by impact: start with images on your highest-traffic pages and inside reused templates (a missing alt in a header logo or product card multiplies across thousands of pages). Most CMS platforms expose an alt field in the media library, and modern frameworks like Next.js make alt a required prop on their image component — a small nudge that catches the omission at build time.
If you want a fast way to see which pages have image and alt issues alongside the rest of your on-page signals, [run a free SEO + GEO audit](/) — it checks images, metadata, structured data, and GEO readiness on any URL. For the surrounding image work — file names, WebP/AVIF compression, lazy loading, and sitemaps — see how to optimize images for SEO. Done together, your images become both findable and genuinely accessible, which in 2026 is the same goal.