Alt Text Best Practices: Writing Accessible Image Descriptions

Imagine trying to shop online and having no idea what any of the products look like. Not because the images won't load—they load fine. You just can't see them. And nobody bothered to describe them.

That's what missing alt text means for screen reader users. They're staring at a page full of products and all they hear is silence, or worse, "IMG_4729.jpg" repeated fifty times.

What Even Is Alt Text

So you've got an image on a webpage. Blind users can't see it. The alt attribute is where you describe what's in the image so screen readers can announce it out loud.

That's literally all it is. A description that gets read aloud. alt="brown leather boots with red laces" becomes a robot voice saying "brown leather boots with red laces."

When alt text is missing, screen readers either skip the image entirely or—and this is the worst—read the filename. "DSC underscore zero zero four seven dot JPG." Not exactly useful information.

The Bar Is On The Floor

Here's the frustrating part. Writing decent alt text isn't hard. But most alt text in the wild is either missing entirely or completely useless.

alt="image" — Thanks, I figured it was an image.

alt="photo" — Still not helpful.

alt="IMG_2941" — Did you even try?

alt="picture of a woman smiling" — Getting warmer but "picture of" is redundant. The screen reader already said it's an image.

What actually works: describe what's happening. alt="Woman in blue scrubs taking notes on a clipboard" tells you something. You can picture it. That's the goal.

Keep It Short Though

Nobody wants to hear a novel. Aim for one sentence. Maybe two if the image is genuinely complex. Around 125 characters is a good target, though not a hard rule.

If you've got some detailed infographic with tons of data, don't cram it all into alt text. Put a short summary in the alt and link to a full description elsewhere. Or put the data in an actual table where it's accessible anyway.

Decorative Images Get Empty Alt

Not everything needs a description. That swoopy background graphic? The decorative line between sections? The star icon next to "4.5 stars" when the text already says "4.5 stars"?

Empty alt:

<img src="decorative-swoosh.png" alt="">

This tells screen readers to skip it entirely. Which is correct! Describing every decorative flourish would be exhausting and useless.

But—and this trips people up constantly—empty alt is different from missing alt. alt="" means "I deliberately marked this as decorative." No alt attribute at all means "I forgot" or "I didn't care." Screen readers handle these differently.

Common Mistakes

Logos. Don't describe the logo design. Just say the company name. alt="Acme Corp" not alt="red and blue stylized letter A with swooping lines". Nobody cares about the swooping lines.

Charts and graphs. Don't describe the visual structure. Give the takeaway. alt="Revenue increased 40% from Q1 to Q4" instead of alt="bar chart showing four bars of increasing height".

Product images on e-commerce. This matters a lot. People are trying to shop. What would they need to know? Color, style, what the thing actually is. alt="Navy blue fitted t-shirt, crew neck, front view".

Icons next to text. If there's a magnifying glass icon next to the word "Search," the icon is decorative. The text already conveys the meaning. Give the icon empty alt.

Icons without text. Now the icon needs alt because it's doing the communicating. A standalone magnifying glass button needs alt="Search".

Why Bother

It's not just about passing automated checkers or avoiding lawsuits. Real people are trying to use websites and hitting walls because nobody typed a few words of description.

ClearA11y catches missing and bad alt text automatically if you want to check your site. But honestly, you can also just look at your images and ask "if I couldn't see this, what would I need to know?" That's the whole skill right there.