About: Software developer based in Edinburgh, working on Forem - the code that powers DEV 🌱
One of the first things we often learn about good web development and HTML is that we need to add alt text to images. But when it comes to actually deciding what that alt text should be, it can be so difficult to know!
Here's a quick visual to help you decide. If you're interested to dive deeper, you'll find a more detailed exploration on Up Your A11y
Did you find this post useful? Please consider buying me a coffee so I can keep making content 🙂
I hear ya!
To be honest I quickly put this together while playing around with a new drawing tool I came across. I've gone back and switched the text to the larger size, and also changed the font to Helvetica to try to make it more readable.
The article linked in the post has a more detailed, text-based, explanation of the decision tree so hopefully if there are still difficulties reading it people can still get the info there 🙏
Thanks for sharing.
But also,
I LOVE THE CHART!
Do you use a certain template or your own designs?
It's using Excalidraw!
I only came across the tool recently, and thought I'd make this little chart while playing around and getting to know how it works. It's definitely great for quick and simple sketching out of ideas. Hopefully in the future it might have some more customisation options too
hi, whats about SEO and googles algorithm to rank you by keywords at alt-text-description for images (for example)?
The same principles apply - meaningful alt text surfaces your content better to both screen readers and crawlers/SEO.
I'm not an SEO expert but my understanding is that Google etc penalise sites for jamming irrelevant keywords into alt text. If you have meaningful alt text it helps any crawler/robot better understand what content is on your page.
Choosing the right alt text for human users will have a knock-on benefit for your SEO.
I got a lot out of the points made in this, and I always love a good flow chart! So, please note that I'm trying hard not to snark.
But the text in the image is really hard to read... I zoomed the page in to 150% and still struggled but managed to read it. And I'm glad I did, but I'm also glad that I was physically able to.