Read time: 1 minute 20 seconds
Images must have alternative text (or alt text) to describe the information or function of the image. Do your images have the right alternative 'alt' text?
- Tivon's page didn’t load all the way. Tivon didn’t get to download the images.
- Caitlin is blind. To understand the contents of the image, Caitlin uses a screen reader to read image alt text.
- Thomas is looking for information with a search engine. Using descriptive alt text on an image will improve search.
Steps to take
- Read the Australian Government Style Manual on images and alt text.
- Different image types have different alt text requirements. Use the alt text decision tree from the World Wide Web Consortium (W3C) to help you work out what alt text you need.
- Only include images on a content page if they meet a real user need.
- Give your images short, descriptive file names.
- Include meaningful information describing each image in the alt text. How would you describe the image if you were talking to someone on the phone?
- Use null (empty) alt text when text describing the image is already on the page (alt="").
- Don’t start the alt text with "image of" or "photo of" – the screen reader already announces that images are images.
- If the image is just for decoration and you don’t want the screen reader to announce it at all, use null (empty) alt text (alt="").
If you use a caption, don’t use the same text in the caption and alt text. Otherwise a person listening to the page hears the same information twice.
If the caption clearly explains the image make the alt text blank (alt="").
- Video tutorial: text alternatives (YouTube)
- Alternative text (WebAIM)
- Complex images tutorial (W3C)
- Alt texts: the ultimate guide (axess lab)