I’m going through and adding alt text to images on my website and I was wondering how I would go about doing it for 88 x 31 site buttons. I’ve seen some examples where the alt text is just “(website name)'s button” or “button that links to (website name).” I’ve also seen some that fully describe what the button looks like so I’m not sure which would be the best way to go about it.
I tend to go for the full description, so ‘a white rectangle outlined in black with the text BACCYFLAP.COM to the left and a simple line drawing of a mustachioed face smoking a pipe’ instead of ‘button for baccyflap.com’. I figure if someone is using a screen reader, I want them to get as much of the full experience as I can give them.
It’s good etiquette either way - it’s always better on average to provide a good description, even if it isn’t really needed. You never know, better safe than sorry - it’s a good habit to get into.
1 Like
Yeah, that makes sense. I’ll go for being more descriptive because you’re right, you never know who may come by. I would like my website to be enjoyed by everyone who visits. I’ll definitely start adding alt text as I’m working, I’m currently wishing I knew about this earlier on.
Thanks for the help! :)
1 Like
Just to add my 2¢ - does the button link to the associated website?
If it does, WCAG technically considers linked images to be functional, so the guideline is for the alt text to simply describe where the link goes or what the button does.
But obviously 88 by 31 buttons are creative, and wanting to describe them to convey that creativity and the vibe of the website makes sense. So I do agree with @rmf!
My additional suggestion is to try to make the link or name of the website the first thing in the description of the button. This way, if someone isn’t interested in how it looks, they get the function of the link first, whereas other folks can keep listening. (This goes for alt text in general - it’s good to put the most important info first.)
3 Likes