Alt Attributes Can Be Tricky

I was looking at a site last night. Ok, I looked at a lot of sites yesterday, but had a specific look at one. They had done the “right” thing and declared an alt attribute to some images. But giving the site a whirl with images turned off, anyone could quickly see that their choice of alt text was not particularly helpful.

In this particular instance, they used headers (<h2>) appropriately, and delivered an image for each of several <h2>. After all, it’s common knowledge now (or should be) that you shouldn’t deliver images without an alternate text equivalent. This is not something to be done by rote, without thinking however. The alternate text is supposed to help explain images, if the image isn’t used just for decoration.

But they merely repeated the text of the <h2> in their alt attribute. Looking at the site with images turned off, or in a text-only browser such as Lynx, or using screenreading software, one suddenly receive the same text, twice in a row. In a visual browser with images turned off, you can sort of tell that there’s an image missing. But in text only or with screenreader, you just get a repetition of text, which doesn’t particularly make sense!

I’m not picking on these guys in particular, it’s an oft-made mistake.

These particular images did not really bring anything else than “eye-candy” to the page. They were not photos adding information to the article. They were simply graphics to make the page look better, which they did. In a situation like that, it would be best to deliver an empty alt attribute. Something like <img src=”someimage.gif” alt=””>. The advantage of that over not providing an alt attribute at all is that screenreaders will (most will anyway) simply know to ignore that image, whereas if there is no alt defined at all, it will speak the word “image”.

I’d go even further and suggest that perhaps a better way yet to deliver these “eye-candy” images might be to use background-images delivered through CSS, but that’s not a hard and fast rule.

The moral of this story is that even if you apply the right rules from a technical standpoint, you don’t always end up with an accessible site. The criteria is met: There is alternate text for the image, but the result is not helpful. If they had been given a chance to understand the criteria and what the real issues are, it is likely they would have done things differently.