Choosing the alt tag or attribute content
Or, why you should always use empty "" alt attributes.
The alt attribute (or alt tag, but don't call it that or the cool kids will mock you) provides equivalent information for a blind user for any image you have have on your web page. Simple, right? You just write in words what the image shows for each and every image.
That doesn't work. While a picture might be a logo, or a picture of a car, or an arrow, that's not what it's doing on the page. A Flickr photograph page is showing photos: the images are the whole point, the content of the page. For almost all the images on your pages, however, your image is almost certainly doing something, performing a function, not being the content of the page itself:
- A logo in the top-left of a page lets a sighted user know to click on it to get back to the home page.
- A picture of a car on a financial services site lets a sighted user know this is a link to information about car insurance.
- A funky arrow lets you style your bulletpoint lists to make your site look cool and make users regard it as a high-quality place to be.
- An agency picture of a young woman reading a book tells users that attractive and powerful people use your product or website.
- An animated GIF of a mailbox attracts users to your email address.
None of these are wrong, or bad. Most of your users can see images: far more of your users have problems with text than have problems with sight, so images help more people than they hinder. And your clients want pretty websites with images on them. So you're going to use images, and so (being a good web designer who cares about accessibility) you're going to have to come up with alt attributes for each one. But what do you use for the content of the alt attribute? Do you really have to describe every single image file, what it looks like? No.
You must describe what the picture is doing. What is its function?
OK so some are easy: if the image is the content of it's a link somewhere, the alt attribute must tell the user where the link goes. So "Home page" or "Car Insurance". There's probably some text on the image anyway, just use that. Simple!
But what if your image is to make your site look cool, or illustrate some statistics with a graph, attract the user's attention, or illustrate the key marketing message of the website? The alt attribute for all these images should be "". That's an empty string. Put in the alt attribute like this: alt="".
<!-- Tree image suggesting solidity and the age of the company, from a financial services site. -->
<IMG src="tree.jpg" alt="">
Really? What about images that aren't just fancy list icon? What about photos that illustrate news stories? Box shots of the software product? A map of how to get someplace? The company logo?
Assign empty alt="" attributes. Strip out the pictures for blind people. They're conveying feeling, and emotional import. Your text has to do that without the pictures, so telling the user that a picture is of "A small child runs towards the camera, crying" or "Picture of the software packaging" or "Map of directions" is useless.
There are two reasons for aggressive approach. First, lots of people browse without images on, so by explicitly making these images invisible to blind users you'll discipline yourself to write without relying on them. Second, and more important, it's really slow and difficult for blind people to read websites. Sure, you like to think that blind users will hang around your website, reading your insightful alt tags and getting a feel for the place. In reality they just want what every other web surfer wants: get in, get the info, get out. Because it takes so much longer for them to do anything, the way you can best serve them is to strip down your content to its salient parts. Not a text-only site you'll never get round to updating, but remembering that for your blind users your content is your text, not your images, and choosing to apply the alt="" to almost every image.