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.
This section has some general tips for writing alt text. For more information on alt text within specific elements of content, see:
In general, consider the following when writing alt text:
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 (see Dealing with lengthy alt text for tips on what to do when a visual element needs lengthy explanation).
-
Do not leave alt text blank. If the image is decorative, simply write Decorative. Some programs (eg Microsoft Word) give you the option to mark an image as decorative. In HTML, you can mark up decorative images as background (see Writing alt text for images).
-
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).
