The alt attribute

Yes I want to talk about the alt attribute. I had so many battles with developers because they didn’t care about the alt attribute of an image. Here we’re talking about a purely visual element. The keyword is visual. Someone put a fair amount of time into finding the best picture for your page, maybe an article picture. But it’s only for the sighted - unless you’ve done your homework and do what you should have done from the beginning: write proper, semantically correct markup.

The alt attribute is an alternative text that is not only displayed when - for example - your image is corrupted or the path to this image has changed and can no longer be found. It’s also important because it holds information for screen readers as well as for bots (SEO, you know?).

Missing out on an alt attribute can become expensive, at least if you’re in the US. The Target Corporation had to pay for the lack of alt attributes in their shop. They were sued by the National Federation of the Blind and had to pay a fine of six million dollars.

Let’s have a look at a really bad example of image implementation:

<img src="pics/zid23kj3-300x250.jpg">

Why is it bad? It has no alt attribute and an odd file name. Screen readers can’t read the alternative because there isn’t one. Instead the screen reader will read the file name.

So just add the alt attribute:

<img src="pics/zid23kj3-300x250.jpg" alt="">

In this case it’s an empty alt attribute. That’s legit. A screen reader will ignore this image. Add an empty alt attribute when you have a purely decorative image - you know - one of those stock photos with smiling business people, all happy and high-fiving. If the image has no contextual meaning, clear it out of the way for the screen reader.

Make it even better:

<img src="pics/zid23kj3-300x250.jpg" alt="a sitting dog with its lead in its mouth">

Again, the alt attribute should provide information about an image. It will not only help assistive technology, but crawling bots as well.

Video example

If you’re not convinced yet, think about the Target Corp. and the National Federation of the Blind...