How I Write Alt Text That Helps Screen Readers and Search

Alt text is the one accessibility task that pays off twice. A screen reader reads it out loud to someone who can't see the image, and a search engine reads it to understand what the page is about. Get it right once and both audiences win.

Most alt text I see on the web is either missing entirely or stuffed with keywords that help nobody.

Here's how I decide what to write and when to write nothing at all.

When An Image Needs Alt Text And When It Should Be Empty

The first decision isn't what to write. It's whether to write anything.

An image needs real alt text when it carries information the surrounding text doesn't. A product photo, a diagram, a screenshot of a result, a chart with numbers in it. If the image went missing and the page got worse, it needs a description.

An image should have empty alt text when it's decorative. A background texture, a divider line, a stock photo of a laptop next to an article about laptops. These add nothing a screen reader user needs. For those I write alt="", an empty but present attribute.

That empty string matters.

There's a real difference between alt="" and no alt attribute at all. Empty alt tells the screen reader "skip this on purpose." A missing attribute makes the screen reader fall back to reading the file name out loud, so the user hears "IMG underscore 4471 dot jpg" in the middle of a sentence. That's the worst outcome and it happens constantly.

So my rule is simple. Every image gets an alt attribute, always. The only question is whether it's filled or empty.

A quick test I run in my head: if I read the page out loud to a friend over the phone, would I describe this image? If yes, write it. If I'd skip it because the text already covered the point, leave it empty.

Icons are the tricky middle case. An icon that's purely visual next to a text label gets empty alt, because the label already says "Settings." An icon that stands alone as a button, like a magnifying glass with no word next to it, needs alt text that says what it does: "Search."

One more case worth naming. If an image is also a link, the alt text describes where the link goes, not what the picture looks like. A logo that links home gets alt="RAXXO home", not alt="orange logo".

I apply this same "empty on purpose" discipline to other invisible states in my tools. The idea of a deliberate default shows up in The Undo Button Every RAXXO Tool Ships With too.

How Long Alt Text Should Be

Short. Shorter than you think.

My target is 8 to 15 words. One sentence, no period needed, no padding. A screen reader user hears this text read out loud, and nobody wants to sit through a paragraph describing a thumbnail.

Here's the trap. People treat alt text as a place to write everything they know about the image. That turns a 10-word description into a 60-word essay the listener can't skip past easily. If the image genuinely needs a long explanation, like a complex infographic, the right move is a short alt plus a longer description in the visible page text or a caption.

Skip the phrases "image of" and "photo of." The screen reader already announces that it's an image before reading your text. So "image of a blue mug" gets read as "image, image of a blue mug." You said image twice. Just write "blue ceramic mug on a wooden desk."

Watch for keyword stuffing.

I've seen alt text like "best coffee mug buy coffee mug cheap coffee mug online." A search engine treats that as spam, and a human listener hears gibberish. One honest description beats five repeated keywords every time.

Punctuation matters less than rhythm. I write alt text the way I'd say it. "Dashboard showing 1,200 orders in the last 30 days" reads cleanly out loud. "Dashboard; orders; 30-day view; metrics" does not.

When I generate or upscale images for product pages, I write the alt text in the same pass, while I still remember what the image was meant to show. If I'm using something like Magnific to clean up a product render, the description goes in right then, not three weeks later when I've forgotten which variant this was.

A good length check: read your alt text out loud at normal speed. If you run out of breath or lose the thread before the end, cut it.

Most of my best alt text lands around 10 words and says exactly one thing clearly.

I also keep a small list of alt text patterns the way I keep naming patterns. Consistency helps, and I wrote about that habit in The Command Naming Convention Every RAXXO Tool Follows.

Describing A Product Image So Both Audiences Get The Point

Product images are where good alt text earns its keep. A shopper using a screen reader is deciding whether to buy, and a search engine is deciding whether to rank your product for the right query. Both need the same core facts.

My formula: name the product, then add the one detail that distinguishes this photo from the other photos of the same product.

So for a listing with five images of the same jacket, I don't write "green jacket" five times. I write "green waxed jacket, front view," then "green waxed jacket, inside lining," then "green waxed jacket worn open over a sweater." Each one adds something. A sighted shopper flips through photos to learn more; the alt text should give a screen reader user that same progression.

Color, material, and the angle or context are usually the facts that matter most. For a mug: "matte black mug, 350ml, held in one hand for scale." That last part tells someone the size better than a number alone.

Avoid describing emotion or vibe. "Cozy inviting lifestyle shot" means nothing to a listener trying to decide on a purchase. Say what's actually pictured: "mug steaming on a windowsill next to an open book."

Price and stock go in the page text, not the alt. Those change, and alt text shouldn't carry data that goes stale.

If you run your store on Shopify, the alt field sits right in the media editor for each image, and the theme usually outputs it correctly. The platform handles the plumbing. The words are still your job, and the default is almost always blank.

One thing I watch: variant images.

If a product has 12 color variants and each has its own photo, generic alt like "product image" wastes all of them. The color name is the single most useful word you can add, so "rust orange variant, folded flat" does real work for search and for a listener comparing options.

When I repurpose product shots into short social posts, the alt text travels with them. I described that whole pipeline in How I Turn One Long Article Into a Week of Short Posts, and keeping alt text attached across platforms saves rewriting it later.

Describing A Chart Or Diagram Without Listing Every Axis

Charts break the "describe what you see" rule, and this is the part most people get wrong.

A sighted reader doesn't read a chart pixel by pixel. They glance at it and absorb the takeaway: sales went up, this bar is the tallest, the trend is flat. So the alt text should deliver that takeaway, not recite the axis labels and every data point.

Bad alt for a bar chart: "Bar chart with x-axis labeled months January through June and y-axis labeled sales from 0 to 500." That describes the furniture, not the story. A listener still has no idea what the chart says.

Good alt: "Bar chart showing sales rising from 120 in January to 480 in June." Now they know the point in one sentence.

For a chart with a clear single message, lead with the message. "Monthly sales nearly doubled over the first half of the year." That's often better than any number because it's the reason the chart is on the page.

When the chart genuinely holds data a listener might need, I give short alt plus a real alternative. A caption with the key figures, or better, the underlying numbers in an actual table on the page. A data table is readable by screen readers cell by cell, so complex data belongs there, not crammed into alt text.

Pie charts: name the biggest slice and roughly how dominant it is. "Pie chart, mobile traffic makes up about 70 percent, desktop the rest." Nobody needs all six slivers read out.

Line charts: direction and shape.

"Line chart trending steadily upward, with a dip around April." The dip is worth mentioning because a sighted reader would notice it instantly.

The same logic applies to screenshots of data. If I post a screenshot of a dashboard, the alt text says the number that matters, like "dashboard showing 3,400 downloads this week," not "screenshot of a dashboard interface with sidebar and charts."

Audio content gets the same respect. When I describe a chart in a voiceover using ElevenLabs, I lead with the takeaway there too, because a listener's attention works the same way whether it's a screen reader or a narrator.

Bottom Line

Write an alt attribute on every image, then decide if it's filled or empty. Decorative images get alt="". Everything that carries meaning gets one short sentence, 8 to 15 words, that says the thing the picture is actually there to say.

For products, name it plus the one detail this photo adds. For charts, give the takeaway, not the axis labels, and push complex data into a real table.

If you want a repeatable way to bake this into your whole publishing setup, start with the Claude Blueprint. It's how I keep small habits like alt text from slipping through the cracks when I'm moving fast.

The best part is that none of this is extra work once it's a reflex. You write the words while the image is fresh, and a screen reader user and a search engine both thank you for it. Start with your next upload.

This article contains affiliate links. If you sign up through them, I may earn a small commission at no extra cost to you. (Ad)