Writing good alt text
I do quite a bit of quality assurance work, specifically looking at the accessibility and web standards use of websites. In many cases I make remarks about the use of alternative text for images and other graphic elements.
It is, not surprisingly, common for alternative text to be completely absent, but it is probably even more common to see inappropriate use of the
alt attribute. In most cases this is caused by well-meaning people using the
alt attribute to describe the image itself instead of the function it has or the content it presents.
Two rules of thumb I use when writing alt text for images are these:
- If you were to describe the document to someone over the phone, would you mention the image or its content? If you would, the image probably needs an alternative text. If not, it should probably have an empty
- Does the alternative text of any images in the document make sense if you turn off the display of images in your web browser? If not, change the alternative text so it does make sense and does not provide redundant information.
These are just rules of thumb and there are exceptions, but as a general rule I have found that they work well.
In practice this means that images should often have empty alt text,
alt="". Be aware though that if the image is within a link that does not also contain descriptive text, the image needs an alt text that describes the link.
Much more detailed instructions for writing alt text are available in an article at WebAIM called Appropriate Use of Alternative Text.
- Next post: Remember to specify a background colour
Subscribe / follow
- Web & Print Designer at Dance of the Deer Foundation (Santa Cruz, CA, Ca, US)
- Front-End Developer - Help Us Revolutionize Enterprise IT at MarkITx (Chicago, IL, Il, US)
- Lead Rails dev for Awesome + Funded London Social Recruiting StartUp, (Full-time, Telecommute) at Likeminds
- Front End Designer & Developer at Mission Data (Anywhere in the US with travel to Louisville, KY and Washington DC, Il, US)
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost