Written by Harry Roberts on CSS Wizardry.
Images in HTML come with a mandatory attribute used to textually describe the information displayed visually through the image. The
alt attribute (not tag) is used by screenreaders etc to tell users who can’t view the actual image what it represents. It is also used in any circumstance where images can’t be loaded (slow connections, broken URIs etc).
You should never not use an
alt attribute, rather leave it empty, thus:
The only time you can really get away with not having a complete
alt attribute is if the image holds no context or information that the user needs to be aware of. This is usually the case when the image is purely decorational, though it may be argued that the image should therefore be added through CSS in the spirit of separating style and content. By that token it is fairly safe to say that there should never be an instance in which you leave an
alt attribute empty.
The next best scenario is that you are using images correctly, for their correct purpose and are using
alt attributes, but they don’t really do as much as they should. A lot of the time I come across images that have less than ideal
Image sourced via Google Images–original author unknown.
One example might be the above image of a car. This, while technically correct, is not ideal:
<img src="/img/car.jpg" alt="Car" />. All this tells the user is ‘Car’. It doesn’t say whether it’s a picture with the word car in it, or whether it’s a picture of a car. A much better
alt attribute would be
alt="A photograph of an abandoned car" (as used in my code).
Another real-world example of poor
alt attribute usage is actually on CNN’s website. On their home page today (26 January, 2010) they have a series of headlines with accompanying images. The code for such a pairing looks like this:
<code><img height="68" border="0" width="120" alt="Haiti's swanky club -> now home to misery" src="http://i.cdn.turner.com/cnn/2010/WORLD/ -> americas/01/26/haiti.camp/tzvids.haiti.aid.cnn.jpg"> -> … Haiti's swanky club now home to misery</code>
This is wrong on two counts:
A screenreader will read out to the user Haiti’s swanky club now home to misery … Haiti’s swanky club now home to misery. Every image/headline pairing on the page is laid out like this, meaning in every instance a user using a screenreader will hear the headline twice. This will surely soon get annoying.
Secondly, the image was actually of earthquake survivors holding a large bag, nothing to do with clubs and, unfortunately, far from swanky.
On the BBC’s home page however (on the same date) they are using
alt attributes perfectly. They have an image of a woman wearing a veil, alongside the article’s headline France report back face veil ban. The image’s
alt="A woman wears a full-length veil in Lyon, 25 January".
One thing which consistently winds me up is the ridiculously bad practice of stuffing
alt attributes with keywords.
alt attributes are an accessibility feature, end of. They are not a way of slipping in keywords out of sight, and any attempt to do so is irresponsible and incredibly bad practice. The only time ‘keywords’ may be validly placed in
alt attributes is if it’s explicitly related to the image; for example:
<img src="/img/product.jpg" alt="A photograph of Mike's Carpets' ProClean™ carpet cleaner" />.
alt text is incredibly simple, yet a little more time consuming than the ‘Car’ cop-out. All you need to do is write out in full exactly what the image shows. If it’s an elephant giving a donkey a piggy-back don’t be lazy and use
alt="Elephant and a donkey". Instead, write out
alt="A photograph of an African elephant giving a donkey a piggy back across a swamp".
Also, for any pages that use similar images repeatedly but are slightly different to one another, make sure your alt attributes reflect these differences. A good example would be my portfolio page. Instead of using
alt="Screenshot" over and over again I used text like
alt="Screenshot of Suzanna Haworth’s website" and
alt="Screenshot of RAAMaudio UK Ltd." etc.
This is one of the most basic aspects of web development, but one that too many people are still getting wrong.
Hi there, I’m Harry. I am an award-winning Consultant Front-end Architect, designer, developer, writer and speaker from the UK. I write, tweet, speak and share code about authoring and scaling CSS for big websites. You can hire me.
I am available for hire to consult, advise, and develop with passionate product teams across the globe.
I specialise in large, product-based projects where performance and CSS scalability and maintainability are paramount.