Including graphics and images can help people understand what you are trying to communicate. However technology disruption, medical conditions, and even situational experiences means that people can often experience difficulty in viewing them.
This is why we implement image accessibility guidelines. That way we can do our best to not restrict the understanding of others.
This section covers some of the basic standards we follow.
General principles
- Images may not load or may not be seen, because of this, avoid using images when the same information could be communicated in writing.
- If an image is purely decorative, insert it into the CSS rather than the HTML code.
- Complex images (graphs and charts) must have written copy near it that explains their purpose and what they show.
Alternative text
Alternative (alt) text is used in multiple situations:
- It appears when an image fails to load or if image display is disabled.
- It is used by text-to-speech software such as screen readers.
- It is used by internet search engines to better understand the context of a page.
We use alt text to explain both the content and the function of an image. It can either be presented as an alt attribute or within the written content surrounding the image itself.
Media browsers will usually supply a field for you to supply alt text, otherwise we write this text into the alt attribute of the img element (e.g. alt="[Alt text copy written here]."). All images must have an alt attribute, even if is empty (alt="").
Alt text is not purely limited to images. It can be also used for other media files such as PDFs or Word documents.
Caption
While alt texts describes the content and function of an image, captions explain the context of that image.
As screen readers will read both the alt text and the caption, sometimes captions are sufficient enough so alt text is not required.
To avoid confusion we:
- Never use the same copy for the alt text and the caption.
- Insert an empty alt attribute (
alt="") if the caption clearly explains the image.
When we write a caption we write it in the following format:
Caption: [Caption copy written here].
Image copyright and courtesy
While this is not purely an accessibility standard it is a requirement for all images we use.
If you have an image and you are unsure who or where it is from, do not use it.
We use the following format when writing image copyright and courtesy information:
Credit: [Photographer's, company's or designer's name and website link if applicable].
Examples
Note: For the following examples the images have been given the alt text of "Example image."
Example one
Credit: Ryan Ellis/WA Museum
Australia’s first national frog count is underway and everyone can join in to help save one of the most threatened groups of animals on Earth.
FrogID is a free smart phone app that lets you document the occurrence of frogs in your local neighbourhood.
Explanation
Alt text is required here to explain the content of this image as the surrounding written copy and caption only provide context for the image.
Suitable alt text would be, "A Moaning Frog."
Example two
Credit: Sue Morrison
This rare wrasse (Pictilabrus brauni) is only known from six specimens collected from the Cheyne’s Beach area east of Albany.
Explanation
Text-to-speech software will notify the user of an image. As the caption and surrounding copy explains the content and function of this image an empty alt attribute (alt="") is sufficient.
Example three
Credit: WA Museum
When harvesting Pandanus for basketry, weavers cut away young leaves, strip away the edge and middle sections, and place cuttings outside for drying. Once dry, the weaver can select and cut sections of the harvest to the specific size and shape necessary. The leaves may also be dyed at this point to suit a specific basket design.
Explanation
The caption and the written copy for this image describes the content and context of the image.
The copy references the shape and colour of the basket and the image is used to demonstrate this. Therefore a suitable alt text for this image would be, "A rectangular woven basket with handles. The leaves have been dyed to alternate purple and natural colouring."
Example four
Explanation
This image was used as part of a online exhibition as a hyperlink to further exhibition content.
When an image is purely decorative and is within the HTML code like this, we leave the alt attribute empty (alt=""). This signals to screen readers they can skip ahead.
However, because this image serves a function, we need to use the alt text to alert users to this. For this image, a suitable alt text would be, "Continue to Referendum Day 27 May 1967."