I’ve written before about progressive enhancement and the idea of providing, if not the same experience, then at least an equally useable one, for users on all browsers. This leads to plenty of hair-tearing as regards things like IE6 hacks or backups for unsupported CSS properties, but one thing which it is easy to forget is the necessity of being accessible to those users with disabilities, screen-readers, text-based browsers, and the like — users not experiencing your visual content in the generally accepted way.
One of the most important ways to ensure that your visual content is accessible to all visitors is the use of the “alt” attribute in any tags. After all, if your images are not being displayed for any reason — broken link, screen-reading technology, images disabled, etc. — the alt text will be the only thing which will be left to provide them with the same user experience you intended to offer. Any image which exists in the context of an HTML markup should always have an alt-text attribute, bar none; a screen-reader accessing an image without alt text will read off a long string of incoherent gibberish related to the image’s source.
In general you will have two different kinds of images you may be working with in a website — images which are used to disseminate information and images which are to be used purely for decoration, and each should be treated somewhat differently. An image used purely for decoration should be given null alt-text, an empty string:
<img src="images/img1.jpg" alt="" />
This might be useful, for example, if you are using breaker images to separate paragraphs, or have an image inserted to provide mood or affect the general feel, where an announcement of the image’s presence by a screen-reader would break up the flow of the page rather than provide any real enhancement.
On the other hand, often your images provide actual supplementary content. You might have an image which displays a graph backing up the main textual content; in this case you would want your alt-text to provide appropriate information which would compensate for the lack of the visual cue:
<img src="images/graph1.jpg" alt="Graph displaying experimental results and showing that x% of visitors to a given site use screen readers" />
Navigational and link image elements, since they will be identified as links, should be given alt text corresponding directly to their purpose, without too much extraneous data:
<img src="images/home.jpg" alt="Home" /> <img src="images/about.jpg" alt="About Us" />
In general, the idea is to provide a smooth “reading” experience for any visitor to the site. Alt text should provide only as much information as it needs too — not too much, which would distract from the rest of the content, or too little, which would prevent the site from fulfilling its ultimate purpose, which is to give the user information.