How to write Alternative Alt Text
It is very strange but I had a colleague ask me the other day "What exactly should I write for an image alt text?" Alt text is the text that appears when an image is not displayed by a website. If an image has not loaded properly on a web page then you will be presented with the alt text. For individuals with sight difficulties alt text can be used by their computer screen readers to describe the image. However my good friends over at Net Resources have recently blogged about Sitepoint.com's Bulletproof HTML. In this article they have explained four clear and concise ways of entering alt text that should leave no web developer confused.
1st Example
An image that is used as a generic illustration for an article about beef cattle farming in Scotland. The actual cow isn't germane to the article; it's just an illustration, a decorative design element that draws the reader's eye and relieves the monotony of the text. In this case, the image doesn't convey any relevant information.- Therefore it should have an empty text equivalent: alt=""
2nd Example
An image is used on a children's web site about farm animals. The page shows pictures of various animals: a horse, a sheep, a pig, a cow, etc. Next to each image is a block of text that presents some facts about each species.- alt="Cow". It's not important that it's an Aberdeen Angus; the picture represents bovine quadrupeds in general.
3rd Example
An image is used on a site about different breeds of cattle. Here it is used to illustrate what an Aberdeen Angus looks like, and how it is different from other breeds. The page comprises a number of images, each with a caption that identifies the breed, but no other textual information. In this case, the text equivalent should describe the particular attributes and traits that are specific to an Aberdeen Angus.- alt="the robust build, the massive chest, the relatively short legs, the buffalo-like hump behind the head"
4th Example
An image is used on a photographer's portfolio page. It's one image among several others, with very different motifs. This is one of the few cases where the alt attribute might actually include a description of the image itself.- alt="A black Aberdeen Angus grazing in the sunshine with Ben Nevis in the background"
