Everything you'd ever want to know about the alt attribute

When you have a restless mind like mine, you start reading crazy things like articles about the Use of ALT texts in IMGs.* A.J. Flavell brings up some excellent points about the original intention of alt texts in img tags and how they are commonly misused. These misuses can produce some funny results and, more tragically, a horrible user experience for those who are unable to view graphics in their browsers.

The biggest point of Flavell’s article is mentioned in its introduction:

The most common mistake … is to provide a description of the image, without considering what job the image was doing on the page, leading to results that can range from the incongruous to the absurd.

Generally, the HTML author should consider what the image is doing for the content when writing alternative text. For example, instead of providing alt="picture of a cruise ship" in the img, the author should consider what the img adds to the experience the user is taking part in.

A better description would be alt="The cruise ship towers over passersby in a sunny tropical climate". (Of course, this would be the best use if the image in question conveyed that sort of function within the content for those who can view it.)

It’s also worth pointing out what the title attribute in <a>, <img>, etc. is intended to do. If you’ve ever written code like this…

…you should consider rewriting your code.

Generally, a better method would be this:

In correct semantics, the title attribute should produce the little textual “tooltip” that appears when you hover your mouse over an image that serves as a link. Internet Explorer encourages the misuse of alt by displaying its text in the textual tooltip that appears when hovering over an image. Avoid this mistake.

I could list more issues the articles raises, but I think the article does a fine job on its own. Give it a read.*

After getting an idea of what Flavell is getting at, I definitely recommend reading his related howlers to see how unusable of an experience the improper use of alt attributes can create.

Imagine hearing this content from a screen reader or seeing it on your mobile phone’s text browser:

Large Yellow Bullet Introduction Large Yellow Bullet The Problem Small Red Bullet Historical Analysis Small Red Bullet Current Situation Large Yellow Bullet The Solution

Or how about this HTML source code

producing these unexpected results:

Photo of a bull in the water canoeing

Who knows who could be laughing at your Web content right now. Even if you don’t agree with the article 100%, it at least suggests looking at content authoring from a different point of view.

* Note: Article no longer exists, so I am linking to the archived version.