Alt Text That Works: For Readers First, Search Second

Every <img> tag carries an alt attribute — a short text alternative that stands in for the image when the image itself cannot be seen. Most site owners either leave it empty by accident, paste in the filename, or stuff it with keywords for Google. All three miss the point. Alt text is written for humans first, and the humans who rely on it notice the difference immediately.

Who actually consumes alt text

Three audiences, in order of importance:

• Screen-reader users. People who are blind or have low vision browse with software that reads pages aloud. When the reader reaches an image, it speaks the alt text. If the alt text is missing, many screen readers fall back to announcing the filename — imagine hearing "IMG underscore four zero three two dot JPG" in the middle of an article.
• Search crawlers. Google cannot fully "see" your images, so alt text is one of the signals it uses to understand what an image shows and when to surface it in Google Images.
• Everyone else, sometimes. When an image fails to load — slow connection, broken link, an email client blocking remote images — the browser displays the alt text in its place. Good alt text keeps the page readable even then.

Notice the order. Write for the first group and you automatically serve the other two. Write for the crawler and you often fail all three.

The core rule: content and function, in context

Describe what the image means on this page, not what its pixels look like. A button that adds an item to a shopping cart should have alt text like "Add to cart" — not "orange rectangle with rounded corners". The visual styling is irrelevant; the function is everything.

Context changes the right answer for the same image. A photo of a woman typing on a laptop could be "Freelancer working from a kitchen table" on a remote-work article, or "The MacBook's keyboard sits flush with the palm rest" in a hardware review. Ask yourself: what would I say aloud if I were reading this page to someone over the phone and reached this image? That sentence is your alt text.

How long should it be?

A phrase to a sentence. Long enough to carry the meaning, short enough that a listener does not lose the thread of the page. There is no hard technical limit, but some older screen-reader versions split long alt text into chunks of roughly 125 characters, which makes rambling descriptions genuinely unpleasant to listen to. If you need more than a sentence, the image probably needs a caption or surrounding paragraph instead — alt text is not the place for an essay, and it is never the place for a comma-separated keyword list.

Good and bad alt text, side by side

The pattern in every row: the better version tells you what you would otherwise miss. The weak version tells you nothing you could act on.

Decorative images get empty alt — not missing alt

Border flourishes, background textures, spacer graphics, a stock photo that adds mood but no information — these should have alt="". The empty value is an explicit instruction: "this image carries no content, skip it." A screen reader stays silent and moves on, which is exactly what a sighted visitor's eye does too.

The distinction matters: an empty attribute and a missing attribute behave differently. Omit alt entirely and the image becomes an unknown object — screen readers may announce it as "unlabelled graphic" or read the file path. So the rule is: every image gets the attribute; only meaningful images get text inside it. If a graphic is purely decorative, also consider whether it should be a CSS background image instead of an <img> at all.

Charts and infographics: alt alone cannot carry the data

A chart can encode dozens of data points; a sentence of alt text cannot. Trying to cram the whole dataset into the attribute produces something unusable in both directions. The working pattern is a division of labour: the alt text states the headline finding — "Bar chart: JPG produced the smallest file in four of five test photos" — and the actual numbers live in nearby visible text or an HTML table that everyone can read, screen reader or not.

This helps more people than you might expect. Plenty of sighted readers skim past charts too; a one-line takeaway under the figure serves them just as well. And if your charts are published as screenshots, capture them cleanly first — our screenshot guide covers that side of the job.

The classic failures

• The filename as alt. alt="DSC_0417-final-v2.jpg" is worse than nothing pretending to be something. Automated by some CMS setups — check yours.
• "Image of…", "Picture of…" Screen readers already announce that an image is an image. Starting the alt with "image of" makes the listener hear "image, image of…". Just describe the subject.
• Keyword stuffing. alt="best cheap running shoes buy running shoes online running shoes sale" is a miserable listening experience and a pattern Google explicitly warns against — it can get a page treated as spam. Stuffed alt hurts both audiences at once.
• The same alt on every image. Ten product photos all labelled with the product name tell a screen-reader user nothing about which view they are on.

Where this fits in image SEO — honestly

Alt text does matter for ranking in image search, but it is one signal among several: the filename, the text surrounding the image, the page topic, and the file's weight and loading performance all count too. A perfect alt attribute on a 4 MB image buried on an off-topic page will not rank. Our image SEO guide covers the full picture; for the weight part specifically, resizing images to the dimensions you actually display is the single biggest win — the free Image Resizer handles that in the browser.

The bottom line: write alt text as if search engines did not exist, then make sure the mechanical signals (descriptive filename, sensible size, relevant page) are in order. That combination is what actually performs.

Auditing the site you already have

Two quick checks reveal most problems:

1. Find the missing attributes. Open your browser's DevTools console on any page and run document.querySelectorAll('img:not([alt])'). Every element it returns is an image with no alt attribute at all — the worst category. Fix those first.
2. Disable images. Most browsers let you block image loading (in Chrome: Settings → Site settings → Images). Reload your key pages and read what remains. Does the page still make sense? Can you tell what each broken-image placeholder was supposed to show? That experience is close to what a screen-reader user gets every day.

For a deeper test, use an actual screen reader: VoiceOver ships free with macOS (Cmd+F5) and NVDA is free on Windows. Listening to your own homepage for two minutes teaches more than any checklist.

Readers first, search second

Alt text is a small craft, but it is a visible marker of how a site is built. Sites that get it right tend to get the other trust fundamentals right too — clear navigation, honest content, and the structural pages every website needs. Write for the person listening to your page, keep decorative noise silent, put data where everyone can read it, and the search benefit follows on its own.