Image alt text
Here’s part one of three in follow-up to the Oxford Geek Night, to elaborate on the points I made about image alt text.
A quick recap (or introduction, if you weren’t there or haven’t seen my slides!):
An image’s alt text is presented to a user if their “user agent’ (the thing they’re using to browse web pages) does not display the image. e.g.
- A text browser is being used
- The user is blind and a screen reader reads out the web pages
Inclusion of the alt attribute on image (”<img>”) tags is required by the W3C specification.
If you’re an Internet Explorer user, you’ll very likely have seen alt text when you mouse over an image. That’s not actually what alt text is for, and it’s unfortunately encouraged a bit of bad practice because people have used it for detail which should go into the title attribute.
Images containing text
The alt text should say what the image says. For example, if you’ve got a pretty graphic which is trying to encourage your users to make a donation, then the alt text will be simply “Make a donation” or similar. Don’t describe the picture itself - that’s irrelevant.
Decorative images
When an image is purely decorative, the alt attribute should be left empty. Describing the image to your users is not necessary. Ideally, you will be using CSS to specify decorative images such as bullet points.
In summary
Always consider the context of the image when deciding on the appropriate alt text. Leave it blank if it’s going to duplicate information or if the image is actually on there to look pretty! The easy way to check whether you’re doing things correctly is to read out your page, including the alt text for each image, and making sure that it makes sense.
Other points to consider
- If your image contains a large amount of text, then you’ll probably need to use the longdesc attribute, which would contain a link to the full description. The alt text would be a brief summary to enable a user to decide whether following that link would be worthwhile.
- Make your images as accessible as possible. Consider:
- Colour blind users
- Try to keep images clear with reasonably-sized text
I hope you find this useful. Comments and questions welcome.