Adding an alt attribute to an image is easy in theory but in practice, making sure that the alt text is informative is a little more difficult. So what do you need to do to ensure that you are making your website as accessible as possible?
Roger Johansson has written an interesting article on the subject, Writing Good Alt Text which touches on a number of important points.
Two rules of thumb I use when writing alt text for images are these:
- If you were to describe the document to someone over the phone, would you mention the image or its content? If you would, the image probably needs an alternative text. If not, it should probably have an empty alt attribute.
- Does the alternative text of any images in the document make sense if you turn off the display of images in your web browser? If not, change the alternative text so it does make sense and does not provide redundant information.
These are just rules of thumb and there are exceptions, but as a general rule I have found that they work well.
As Roger also points out, this means that images should often have empty alt text, as adding descriptive text will only serve to hinder your users rather than help them.
Do you follow this advice when deciding on your alt text?
While I understand the theory for not having alt text for some images, I personally do not think its a good idea.
1) Can help SEO – even if only small
2) Is an alt text for a meaningless image that big a deal?
Hi Jermayn, For both points I’d ask you to consider what impact this would have on accessibility?
If you’re only adding alt text to benefit the search engines then how does this affect people who are viewing the page with images turned off who are hearing an audio version of the page via a screenreader?
Try turning CSS and images off and if the alt text doesn’t add anything to the content then I’d always use alt=””.
Writing alt text for images that don’t need it is a waste of time (IMHO) and is unlikely to have any meaningful impact on SEO.
Personally I always use the rule of “If it’s decorative, leave the alt blank”.
Hi Rob, in most cases for decorative images I’d usually display them as background images anyway using CSS but there may also be occasions when a foreground image would also not provide any further information to the content and in those cases I’d also use alt=””