Using graphics and alt text
Estimated read time: 1 minute 32 seconds
Alternative text, also known as alt text, describes the information or function of digital images.
Who does this affect?
- Kala has low vision and uses a screen reader to read web pages. Alternative text provides her with details that explain images.
- Dorota lives in a rural community and doesn’t have a fast internet connection. They don’t download images because it takes too much time and data. Alt text allows them to understand the image without seeing it.
- Mike is looking for an image using a search engine. Using descriptive alt text improves his search results.
Steps to take
- Choose relevant and clear image
- Only use images that add context to the text
- Make sure the images are not culturally insensitive to any audience
- Do not use images of text unless it is essential to do so for visual presentation (logos and infographics are considered essential)
- Do not use flashing, blinking or animated graphics
- Once you have chosen your image, give it a short, descriptive file name
- All images must have alt text, unless they are purely decorative. Alt text should:
- be no longer than 10 words. Think about how you would describe the image to someone over the phone
- not start with "image of" or "photo of" – screen readers announce that images are images
If you’re using an image that is already described in text, mark it as decorative instead of using alt text.
For example, an image of a telephone beside the words ‘Telephone number’.
Microsoft Suite and CMS Lite both allow you to mark images as decorative. In WordPress, you may leave the alt text field empty to show an image is decorative.
Use the alt text decision tree to help you work out what you need.
For more information on the different types of alt text, read the Australian Government Content Guide on images and alt text.
If you use a caption, don’t use the same text in the alt text. Otherwise a person listening to the page will hear the same information twice.
If the caption clearly explains the image, mark the image as decorative.
- Video tutorial: text alternatives (YouTube)
- Understanding alternative text (WebAIM)
- Complex images tutorial (W3C)
- Alt texts: the ultimate guide (axess lab)