Add images only if they help the user

Use images if they help users complete their task with your service or product. Images can make it easier for some people to understand information.

Types of images include:

• photographs and decorative images
• charts, graphs and maps
• diagrams
• drawings
• icons.

Choose diverse images that are clear and simple

Choose images that reflect and support the diversity of Australia’s peoples and cultures, especially if you are using images of people. 

Keep images simple and use them to support information in the text.

Images must be:

• accessible
• easy to understand
• relevant
• uncluttered
• from a credible source
• consistent in design and style across the content.

Use the same font and typeface, line thickness and colour scheme in all images of the same type.

Include decorative images only if they are relevant to the content

Decorative images, such as photographs, can show an idea and make content more visually attractive.

Don’t use images to fill in space. Decorative images must still be relevant. Use images that relate directly to the content.

People will identify and dismiss stock images that don’t seem genuine.

Use alt text, captions and titles to explain images

Follow the guidance on adding alt text, captions and titles.

Add alt text to all images. 

Include captions for all images that are not decorative. Add titles to help users scan content.

Set the correct resolution and file type

Image resolution must be appropriate for the content.

Don’t embed images with a large file size into content that you will publish online, such as PDFs or webpages. Optimise and compress all image files so they make it quicker for the user to access the information.

Design for mobile devices first. An image will scale to the device people view it on. Check that it’s easy to read on a mobile phone screen and a desktop.

There are many file types for images. Seek specialist advice to optimise an image file as a vector or raster file format.

Use graphs, charts and maps if they explain complex information

Use graphs, charts and maps for information that is too detailed for the text. Don’t use them if another format meets the user need – such as a list, table or tool.

Graphs and charts display data, making it easier to understand. They are good for showing:

• trends – such as change over time
• statistical distributions and patterns
• simple comparisons – such as totals for different categories or different rates of change
• processes and relationships – such as an organisational structure or a workflow chart.

To make it easier for people to use line graphs and bar charts:

• Don’t add borders or background tints.
• Use gridlines only where they help people read the data.
• Use ‘tick marks’ on the x- and y-axes to show the scale of data intervals at a glance. Avoid more than 10 tick marks on the y-axis.
• Scale the y-axis to be consistent across the viewport or page.
• Keep it simple (for example, include no more than 3 or 4 data series on a line graph).
• Don’t use colour as the only source of meaning. Try adding dots and dashes to lines and cross hatching to areas.

Add legends and units of measurement to complex images

All graphs, charts and maps should have a legend that tells people the meaning of lines, colours and symbols.

Make legends consistent in a webpage or group of webpages dealing with the same topic. Place the legend in the same position (for example, bottom centre, top left or to the right).

Use the same font and typeface, and colours and symbols for the same types of information.

Maps must also have a scale bar and an arrow to show which way is north.

Include all units of measurement. This helps people understand what the numbers mean.

• Label the x- and y-axes, as well as legends, titles and captions as relevant.
• Use appropriate units (for example, millions of dollars for a company balance sheet but thousands of dollars for a household budget).
• Use the appropriate number of decimal places on labels (for example, $1,000 – not $1,000.00 – for a scale of zero to $10,000).

Refer to informational images in the text

Refer to complex images in the body of the text. It helps people relate the discussion in the text to the information displayed in the image.

Place the image close to where you mention it in the text. For example, a graph must be on the same page and after the paragraph that refers to it.

Don’t repeat the whole caption of the image in the text. Instead, use a locator number to refer to it, for example ‘Figure 1’.

Don’t refer to ‘the photograph on the left’. This sensory language is not accessible for some users.

You don’t need to refer to decorative images and illustrations in the text unless they are part of the discussion.

Ensure your text comments on or interprets the image, rather than repeating the text or data in it.

Check any details that feature in both the text and an image. For example, the text might quote numbers from a graph. It is easy to make a last-minute change to one and forget to correct the other.

Follow the correct order for image notes

Image notes appear below an image. Notes can apply to the whole image or to one element of the image.

List notes in the following order:

1. abbreviations
2. notes to superscript locators (such as a superscript ‘#’, ‘a’ or ‘1’)
3. general note to the image
4. source of data (use the appropriate form for author–date or documentary–note).

Don’t include this information in the caption or in ordinary footnotes or endnotes.

Align notes to the left. They should not extend beyond the edges of the image.