Image Alt Text: What It's For, and How to Write It Right

Alt text does two jobs at once

The alt attribute on an <img> tag exists for one reason: to describe the image to whoever or whatever can't see it. That covers two real audiences — a screen reader announcing the page to a visually impaired visitor, and a search engine that can read every word of surrounding text but genuinely cannot interpret pixels. It also quietly does a third job: if the image fails to load, the alt text is what shows in its place instead of a broken-image icon.

What makes alt text good versus useless

Good alt text describes what's actually relevant about the image in plain language — "golden retriever puppy sitting in autumn leaves," not "image of a dog." The "image of" or "picture of" prefix is redundant; screen readers already announce that it's an image before reading the alt text. For purely decorative images — a background texture, a divider line — the correct move is an empty alt="", not a missing attribute. An empty alt tells a screen reader to skip the image silently; a missing one often makes it announce the filename instead.

Four images, before and after

Alt text mistakes rarely show up in isolation — a page with one bad example usually has several. Here are four common patterns together, all wrong in different ways:

<img src="img_4821.jpg">
<img src="banner.png" alt="image">
<img src="shoes.jpg" alt="running shoes buy cheap running shoes sale best price">
<img src="divider.png" alt="decorative line divider graphic">

In order: no alt attribute at all (a screen reader falls back to announcing the filename, "img 4821 jpg"); a generic placeholder that describes nothing; a keyword-stuffed string written for a search engine instead of a person; and a decorative divider given a description when it should be silent. Fixed:

<img src="img_4821.jpg" alt="Golden retriever puppy sitting in autumn leaves">
<img src="banner.png" alt="TrailFoot spring sale banner, 20% off all trail shoes">
<img src="shoes.jpg" alt="Blue and orange trail running shoe, side profile">
<img src="divider.png" alt="">

Notice the last one didn't get a more detailed description — it got emptied out entirely. alt="" is the correct fix for a purely decorative image, not a cop-out; it tells a screen reader to skip the image in total silence instead of announcing something the user doesn't need to hear. Writing a description for a divider line would actually make the experience worse, not more complete.

5 alt text mistakes that undercut both SEO and accessibility

Functional images need different alt text entirely

Everything above covers content images — photos, illustrations, charts. Images that double as controls follow a different rule: when an image is wrapped in a link or acts as a button (a magnifying-glass icon that submits a search, a logo that links home), the alt text should describe the action, not the picture. "Magnifying glass icon" tells a screen reader user what the image looks like; "Search this site" tells them what happens if they activate it — which is the only thing that matters for a control. This is a common blind spot even on sites that get content-image alt text right, since it requires thinking about the image's role in the page rather than its visual content.

Charts, infographics, and other complex images

A short alt attribute works fine for a photo, but it genuinely can't carry a bar chart with twelve data points or a multi-step infographic — trying to cram that much detail into one attribute produces something too long for a screen reader to usefully announce and still incomplete. The better pattern: keep the alt text short and identify what the image is ("bar chart of quarterly revenue by region"), then put the actual data or explanation in visible text near the image — a caption, a summary paragraph, or in the clearest cases, an adjacent data table. That visible text serves the same dual purpose alt text does for a simple image: a screen reader user gets the full detail from the surrounding text instead of a cryptic wall-of-numbers attribute, and Google gets real, indexable text describing the data instead of an image it can't parse. This is also just good practice independent of accessibility — a chart that only exists as a static image, with no text version anywhere on the page, is invisible to search entirely, since Google still can't read the numbers off a picture.

The accessibility angle isn't optional

Missing alt text is one of the most common findings in web accessibility lawsuits, and WCAG 2.1 — the standard most accessibility regulations reference, including the ADA in the US — explicitly requires text alternatives for meaningful images. This isn't a nice-to-have layered on top of SEO; for many businesses it's a genuine legal exposure sitting in plain sight on every product photo and hero image.

Heading structure sits in the same spot — another attribute both a screen reader and a search engine read directly, rather than a purely cosmetic detail. The two are worth auditing together: a page with strong alt text and a broken heading outline (or vice versa) is still only half fixed for either audience.

Alt text for logos and branded images

A recurring edge case: what should a site's own logo say in its alt text? Not "logo," and not the same as its surrounding link text if the logo is also a link home — a logo linking to the homepage typically just needs the company name ("TrailFoot Co."), since a screen reader announces it's a link separately and doesn't need to be told twice that it's also an image. Repeating "TrailFoot Co. logo, link to homepage" is technically more descriptive but noticeably more cluttered to actually listen to, especially on a logo that appears identically on every single page. The general principle underneath all of this is the same one that applies to every image on the page: describe only what a listener actually needs to know to understand the image's purpose, and nothing more.

Check your own page

CheckSEO's Alt Text Checker scans a page and lists every image missing alt text in one pass, so you're not opening dev tools on every image by hand.