Writing for the web course participants’ guide

Write text alternatives for images

Summary: Write alt text for images that 'serve the equivalent purpose' of that image.

Some users can’t see or use content presented in images. They need a text version instead.

  • Screen reader users can’t see images
  • Screen magnifier users may not see the detail in images
  • People accessing the web using low bandwidth may need to disable images.

Text alternatives can also help search engines to identify the content an image contains – this can improve search ranking for image searches.

The role of text alternatives

Text alternatives are text versions of the information provided by an image. They must “serve the equivalent purpose” of an image.

Images that are exempt from the alt text requirement

The guidelines list 2 exceptions to this.

  • Sensory images — works of visual art or photographs of them. Words can’t fully capture this content, so you need to provide “at least a descriptive identification”. This could be title of the work and the artist, and any other detail you have about the work, such as the medium, size and date.
  • Decorative images — images that have an aesthetic purpose only. These don’t need a text alternative. Use an empty ALT attribute so a screen reader ignores them.

See Success criterion 1.1.1 of the Guidelines

Writing alt text

To write an appropriate text alternative, it can be helpful to ask:

  • What is the role of this image on this page?
  • What information does this image communicate?
  • What would you need to write if you couldn’t use the image?

To work out how to write alt text for an image use the helpful 4Syllables text alternatives - decision tree

Then write text that communicates the information conveyed by the image.

There are two main types of text alternative — short and long.

Short text alternatives

Short text alternatives are usually provided using the ALT attribute of the IMG tag.

<img alt=”a short text alternative”>

While there’s no technical limit to the length of a short text alternative, there’s a practical one. If you need more than a sentence or 2, or some structure to make the text readable, use a long text alternative instead.

Long text alternatives

Long text alternatives can be provided:

  • near the image, in body text on the same page
  • in an accordion below the image
  • on a separate page, with a link immediately below the image
  • further down the page, with a jump link immediately below the image.

When using a long text alternative, use the ALT attribute to label the image and say where the long text alternative is.

If you provide the long text alternative on a linked page, add a link back to the original page. If someone lands on the text page, they can easily navigate back to the main content.

Images with captions

Sometimes you’ll need to caption an image to provide a visible label for everyone. The Australian Government’s Style Manual also suggests you can use captions to include attributions for an image.

Don’t repeat the caption as the ALT text. If you do, a screen reader user will have to listen to the information twice.

Use a short label as the ALT text for a captioned image. Then screen reader users will know the caption relates to an image. Even if you use the <figcaption> element, you should still use a short ALT text because many screen readers fail to announce the image.

Examples

Before

 After

A stock image used on a page about health insurance for singles has the following short text alternative.

alt=”2 young women surfing”

Stock image now has blank text alternative.

alt=””

A photo of artwork promoting an exhibition has the following short text alternative.

alt=”Home is where the heart is”

Photo now has a caption that provides a descriptive identification, and a short text alternative to label the image.

alt=”Artwork”
Caption:

<p>“Home is where the heart is”, Lily Jones, 2016, oil on canvas, 100cm x 80cm.</p>

An image of the cover of a report that acts as a link to a PDF version of the report, has the following short text alternative.

alt=”cover of report”

Image now has an equivalent text alternative that includes the name of the report and information about the format and size of the linked report.

alt=”Annual Report 2018-19, PDF 120kB”

A series of company logos used on a page listing sponsors for a charity have the following short text alternatives.

alt=”logo”
alt=”logo”
alt=”sponsor logo”

Logos now have an equivalent text alternative that includes the name of each sponsor organisation.

alt=”Westpac Bank”
alt=”Victorian Government”
alt=”Vision Australia”

Line graph showing data on median home prices in an article about housing affordability has the following short text alternative.

alt=”median house prices graph”

Line graph now has a short label as the ALT text for the graph. The image is followed by a link to a page with a long text version of the data shown in the graph. That page has an informative main heading. Then it provides a paragraph summary of the data trend visible in the graph. And it includes a table showing the data used to generate the graph. A link back to the original article is included at the end.

alt=”Median home prices 2009-2019. Long text version linked below”
Link: Text version of median home prices 2009-2019

On the linked page:

<h1>Median home prices in Australian capital cities, 2009-2019 – text version</h1>
<p>Over the 10 years to 2019, the median home price has risen in all capital cities. The highest rise has been in Melbourne, the lowest in Adelaide.</p> 
[data table showing data used to generate the line graph]

Back to Analysis of housing affordability

Resources