The Alt Tag Mistake Most Developers Make
Most developers write alt tags that don't help anyone — "image", keyword soup, or a description of the wrong thing. Here's what good actually looks like.
On this page
I used to write alt tags like an afterthought. A quick alt="image" and move on. Job done. Until I realised I wasn’t just being lazy — I was actively making the site worse for a lot of people.
What Is an Alt Tag?
It’s a short piece of text attached to an image in HTML:
<img src="dog.jpg" alt="A golden retriever catching a frisbee in a park" />When the image can’t be seen — because it failed to load, or because the user relies on a screen reader — the alt text is what gets read out or displayed instead.
That’s the accessibility side. But there’s an SEO side too. Search engines can’t see images either. The alt tag is how they understand what an image contains and whether it’s relevant to the page. Get it right and it works for both.
What Happens When You Get It Wrong
Here’s the thing — most developers aren’t skipping alt tags entirely. They’re writing ones that don’t actually help anyone.
Too vague:
<img src="team-photo.jpg" alt="image" />A screen reader would announce “image.” That tells the user nothing.
Keyword stuffed:
<img src="coffee.jpg" alt="coffee shop London best coffee cheap coffee near me" />Useless for accessibility, and Google now actively penalises this.
Describing what it is instead of what it shows:
<img src="chart.jpg" alt="chart" />What kind of chart? Showing what? For who?
What Good Actually Looks Like
A good alt tag describes the content and context of the image — what it shows and why it’s there.
Before:
<img src="hero.jpg" alt="photo" />After:
<img src="hero.jpg" alt="A developer working at a standing desk with two monitors" />Before:
<img src="graph.jpg" alt="graph" />After:
<img src="graph.jpg" alt="Bar chart showing 40% increase in user sign-ups between January and March 2024" />The goal is simple: if someone read the alt text without seeing the image, would they get the same information? If yes, you’re done.
A Few Rules Worth Keeping in Mind
Keep it under around 125 characters. That’s roughly the point where screen readers start cutting off. Be specific, but be concise.
Don’t start with “image of” or “picture of”. Screen readers already announce that it’s an image before reading the alt text. Starting with those words just wastes characters.
Don’t use images of text. If you’ve put words inside an image, most users won’t be able to read them — screen readers can’t extract text from images. If it needs to be read, it should be real HTML text. The one exception is logos, where the alt text should match the text in the image exactly.
When an image is purely decorative, use an empty alt tag. If a background pattern or divider image adds nothing, alt="" tells screen readers to skip it entirely rather than announcing something meaningless.
The SEO and Accessibility Connection
These two goals are more aligned than they seem.
Search engines index alt text to understand images, which affects how pages rank in image search and reinforces the relevance of the surrounding content. Writing descriptive, natural alt text — the kind that genuinely helps a screen reader user — also tends to be the kind that ranks well. You don’t need to optimise for both separately. Write for the person who can’t see the image, and the SEO usually follows.
Keyword stuffing alt tags to game search rankings is the one place where the two goals diverge — and it’s not worth it. It produces a bad experience for screen reader users and modern search engines are good at spotting it.
Final Takeaway
Alt tags take about ten seconds to write well. Most developers either skip them or write something that doesn’t help anyone.
The test is straightforward: close your eyes, have someone read the alt text to you, and ask whether you’d know what the image was showing. If you would — you’re done.
If you wouldn’t, it needs another pass.
Originally published on Medium .
