DEV Community

loading...
Cover image for Alt Text Decision Tree - Quick Helper

Alt Text Decision Tree - Quick Helper

s_aitchison profile image Suzanne Aitchison (she/her) Updated on ・1 min read

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

Alt text decision tree illustration, visit the link mentioned above for the full article


Did you find this post useful? Please consider buying me a coffee so I can keep making content 🙂

Discussion (6)

pic
Editor guide
Collapse
smallbellows profile image
Sara Given

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.

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

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 🙏

Collapse
mustafaanaskh99 profile image
Mustafa Anas

Thanks for sharing.
But also,
I LOVE THE CHART!
Do you use a certain template or your own designs?

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

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

Collapse
fabian profile image
fabian

hi, whats about SEO and googles algorithm to rank you by keywords at alt-text-description for images (for example)?

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

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.