It’s good practice to specify alternative text for images using the “alt” attribute – although it’s unfortunately common to see images without it.
To answer the question in the title – you must always specify alternative text for images.
But as with anything on the web, it’s possible to find conflicting arguments and information about this practice – so to try to improve the credibility of the recommendations in this post, I frequently refer back to W3C.org.
Almost every image on a web page should have some text placed in the “alt” tag (or the long desc) – and this is a Priority 1 item on the W3C checklist.
Examples:
1. Images used as illustrative content, e.g.
<img src="me.jpg" alt="The article's author" />
2. Images used for spacers and bullets – yes, these are mandatory! Even though the image doesn’t add any real content, you can still specify alternative text, e.g.
<img src="bullet.gif" alt="* " />
3. Images used as links – there are a couple of different ways of doing this, which must be handled in different ways. if you provide no link text and the only content of the <a> link is the image, use the “alt” tag to specify a text equivalent, e.g.
<a href="home.html"><img src="home.gif" alt="Home page"/></a>
In the case where both an image and text are specified as the content of a link, repeating the anchor’s text in the “alt” attribute is unnecessary – W3C mandate using a space in this instance, e.g.
<a href="home.html"><img src="home.gif" alt=" "/>Home</a>
So the “alt” tag still has some text, even though it’s a space – you mustn’t omit the “alt” tag.
What about background images in CSS?
I haven’t been able to find information on W3C about how alternative text for background images should be treated. Christian Heilmann argues that images in CSS should be purely aesthetic, and therefore don’t need alternative text. I definitely agree with his argument – your page still needs needs to make sense with CSS switched off.
But what if you are supporting a site where someone has put background images with semantic value into the CSS? Well, you could change the code to bring this data into an <img> tag, and specify an “alt” value in your HTML rather than CSS. But sometimes this might not be possible – in this case, the Yahoo Developer Network recommends using ARIA-roles, which enables screen-readers to recognise your ARIA enhanced element as an image.
<div role="img" aria-label="The article's author">
I hope this article helps you improve the accessibility of your site.
Jeremy Lindsay 