Alt text plays a key role in accessibility. It is a written description of the main message that users are expected to derive from nontext content (e.g. graphs, photographs) and from tables. The alt text is read aloud by a screen reader and allows users to understand the content without needing to see it.
Users may need alt text because:
they have a vision, cognitive or physical impairment and use text-to-speech software
they have a very slow internet connection or high download costs, so they are browsing with images disabled
they are using a text-only browser.
Alt text gives users:
a way to access the content and function of images using a screen reader
a meaning and description for images that can be read by search engines
a method to display content when the user has chosen not to view images.
Caution! Beware of auto alt text. It is important to add alt text, especially for images, because software programs may generate their own automatic alt text using image recognition. This automatic alt text may not have accurately recognised the image and may produce incorrect text.
Principles of writing alt text
The key to writing good alt text for nontext content is to think about why the nontext content is being included. This will help you understand what is important about the content for the page’s intended audience and convey that to the audience.
In general, consider the following when writing alt text:
Capture the overall message of the visual element clearly and succinctly. For example, if the figure is a graph, you can talk about the general trends without discussing all the data points
Line graph showing that elephant numbers in Thailand declined from 1920 to 1955, then increased slowly to peak in 2010 and remained steady until 2015
Provide the same information as shown by the visual element if it is important for user understanding. For example, if an image contains text, this text must be reproduced in the alt text. If the image is a flowchart of a process with multiple points of divergence, make sure the decision points and options at each point are clearly described in the alt text.
Avoid irrelevant detail
For a photograph on a company webpage:
Joe Bloggs, CEO of Widgets Ltd
not
Joe Bloggs, CEO of Widgets Ltd, standing at the entrance to Widgets Ltd wearing a blue suit with a white shirt and red tie
- Write alt text to suit the context of the content. The same image may have different alt text in different situations
For a photograph of the Sydney Harbour Bridge on a tourism website:
The iconic Sydney Harbour Bridge, a major tourist attraction
For the same photograph on a site about engineering:
The Sydney Harbour Bridge, which was constructed in 1932, is the tallest steel arch bridge in the world
- Include an alt text summary, even if the same information is in the main content. For example, if you have discussed the up-and-down trends of a complex line graph in the text, include an overall summary in the alt text
Graph of sales of different brands of widget from 1935 to 1990, showing the sharp drop in sales following the invention of Superwidget in 1973
Avoid lengthy alt text.
Do not leave alt text blank. If the image is decorative, simply write Decorative. Some programs (e.g. Microsoft Word) give you the option to mark an image as decorative. In HTML, you can mark up decorative images as background (see Image accessibility).
Do not use en dashes. Many screen readers will not be able to accurately read an en dash in a number range
40 to 50 years not 40–50 years
- Avoid the use of symbols because many screen readers will be confused by them. If in doubt, write the term out in words. Most screen readers can cope with common symbols, such as:
- @ (‘at’ symbol)
- & (ampersand)
- / (slash)
- © (copyright)
- ® (registered)
- ™ (trademark)
- ¶ (paragraph)
- • (bullet)
- $ (dollar)
- € (Euro)
- £ (British pound)
- ¥ (Yen)
- % (per cent)
- ° (degree)
- ½ (one-half)
- ¼ (one-quarter)
- ¾ (three-quarters).
Dealing with lengthy alt text
If lengthy alt text is required to describe an element, consider including the alt text in an appendix to the publication or in another section of the content. For example, the alt text attached to a photograph can say:
Murrumbidgee River at Wagga Wagga (long description for the photograph is in Appendix A)
Immunology research group (the list of names is in the caption)
This option is shorter and gives people a choice – to go to the relevant section to listen to a long description of the photograph, to come back to it later or to skip it altogether.
Attaching alt text
To add an alt text description to an image in Microsoft Word for PC or Mac (Microsoft Office 365), either:
right-click on the image and choose Edit Alt Text; describe the image in the space provided in the right-hand pane that opens
click on the image and then on the Picture Format tab, then on the Alt Text button; describe the image in the space provided in the right-hand pane that opens.
To add an alt text description to an image in Google Docs:
select the image
right-click on the image and choose Alt Text
describe the image in the Description box
click on OK.