Published at
Updated at
Reading time

Writing a good alt text for images is one of the things many people do wrong. Unfortunately, not every person publishing for the web understands the importance of alternative image texts. Many people I talk to are surprised by the level of detail a good alt text should include.

If you miss providing good alternative image texts, you're cutting out visitors using assistive technology. Search engine bots won't like it either. Image alternative text is important!

If you want to learn more, I can recommend having a look at this article from and check out my long list of excellent accessible resources.

While I usually try to follow the approach of asking myself detailed questions about the image (Why is this image there? What do I see? What's its meaning?), today I saw a different approach.

Dave Ruppert shared that he treats images like paragraphs. If you look at it from this angle, you understand that writing image alt texts that include a word or two read weirdly. They break the reading flow and do not support the context.

This approach is smart, especially when you're using Markdown to publish posts! Let's have a look at a random example.

Doggo ipsum dat tungg tho you are doin me a concern long doggo pupper you are doing me a frighten, corgo heckin angery woofer. Very taste wow adorable doggo long woofer doing me a frighten corgo, long water shoob tungg. 

![dog statistic](/dog-statistic.jpg)

Doggo very taste wow you are doing me a frighten aqua doggo shooberino, pupper shooberino fluffer. Ur givin me a spook woofer thicc doggorino pupperino corgo, puggo doge corgo lotsa pats you are doin me a concern, noodle horse shooberino you are doing me the shock very hand that feed shibe.

This Markdown blob includes two paragraphs with an image with the filename dog-statistic.jpg and an alternative text dog statistic in-between. It's not helpful. To understand the full context, I have to open the image element and look at the image.

If the writer of this text treated images as paragraphs, it would include an alternative text that tells me what information this statistic presents. The reading flow would continue, and I wouldn't lose context. That's all image alternative texts are about – context.

Thanks Dave for this approach!

Was this post helpful?
Yes? Cool! You might want to check out Web Weekly for more WebDev shenanigans. The last edition went out 3 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles