What is alternative text?
Alternative text provides a textual alternative to non-text content in web pages, such as photographs, logos and other images.
Alternative text serves several functions:
- it is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities
- it is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images
- it provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone
Do not use alternative text to describe decorative elements or visual elements that are not not important to the page content. You do not need to have alternative text to describe a visual pattern, colour or visual style of a site element (such as a navigation element). For these elements leave the ‘alt attribute’ of the image blank.
All of these functions are important so you must provide alternative text wherever practical.
Alternative text can be presented in two ways:
- within the alt attribute of the img element (in code) – this will be picked up by screen readers but invisible to majority of page visitors
- within the context or surroundings of the image itself – this may be in the form of an image caption for example
Using an image caption instead of using an ‘alt attribute’ may be more appropriate in some contexts – for example a photo within an article. When using a caption it’s important not to duplicate the alternative text so the ‘alt attribute’ should be left blank in this case.
In many cases using a caption around an image will not be possible to include so an ‘alt attribute’ must be used instead.
Examples of proper use
Example 1: Photos
With an image or photograph it is good to explain the scene in detail whilst also keeping the description short. There is no need to state that this is an image as screen readers will make the user aware of this automatically. You may, however, state whether the image is a photograph or illustration – if it’s important for the user to know.
The mood, or tone, of the image should also come across in the explanation if it is important to the user’s understanding. In this example the diversity of the crowd, the excitement of the scene and the emotions of the people in the photo are integral to the user’s understanding so it’s important to make note of them.
A caption may be used for this image instead of an ‘alt attribute’ in the image tag.
Good Alternative text example:
'Photograph of a large, diverse group of cheering students, standing up and fist-pumping on the bleachers of a basketball game.'
Bad Alternative text example:
'Image of a crowd at a basketball game.'
Example 2: Logos
There is no need to state that this is a logo. However the company/department name must be used. When an image is also a link, screen readers will make this clear to the user so there is no need to state that this is a link. However, it is important to indicate where the link will take users. In this case it will take users to the homepage of the website.
Good Alternative text examples:
'Regional Development Victoria. Homepage.'
Bad Alternative text example:
'Site logo. Click this link to go to the homepage.'
Further reading and resources
For in-depth information about alternative text:
Reviewed 17 October 2018