An approach to write better image alt text
- 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!
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!
- How to let all your users know what to expect when they click a link
- The CSS "content" property accepts alternative text
- text-transforms affect screen readers, too!
- Missing accessibility warnings in browser developer tools – why can't we have real-time advice?
- Viewport units for font sizes destroy zooming