Images

Provide Alternative Text

Images should always include an 'alt' attribute (even if it is empty). This provides useful information about the image that can be then accessed or ignored by assistive technologies.

Example of the alt field in the Edit+ InterfaceCharles Sturt Unversity Logo

<img src="logo.jpg" alt="Charles Sturt University Logo" /> 

A screen reader will relay this as "Graphic - Charles Sturt University Logo".

Decorative Image

Decorative images have an aesthetic purpose, and provide no information or specific functionality. Use an empty 'alt' as they do NOT need alternative text and will then be ignored by screen readers.

Example of a Decorative Image

<img src="image.jpg" alt="" /> 

Alternative Text

It is essential that alternative text provided be meaningful and relay the message of the image. If the image has no particular message treat it as decorative.

Group of four students sitting on the grass in front of an campus accommodation building.

<img src="image.jpg" 
alt="Group of four students sitting on the grass near a campus accommodation building." />

OR

<img src="image.jpg" alt="" />

NOT

<img src="image.jpg" alt="Students" />

Images that convey the same message as the text nearby are considered decorative, such as icons and their descriptive links.

Example of image with associated text

<div class="button">
<img src="help.jpg" alt="" />
<a href="help.html">HELP</a>
</div>

Images with Links

Images are often used in conjunction with links, such as the heading and thumbnail in a news item.

Example news story

If the image is coded a separate link it must have an 'alt'.

<a href="news.html">Good, bad and ugly for Antarctic penguins</a>
<strong>Thursday, 8 May 2014</strong>
<a href="news-gallery.html"><img src="news-image.jpg" alt="Good, bad and ugly for
Antarctic penguins" /></a>

Combine image links that are adjacent to a text links if they connect to the same resource.

Images coded within text links must have an empty 'alt' unless the image conveys additional information

<a href="news.html"><img src="news-image.jpg" alt="" /> Good, bad and ugly for Antarctic 
penguins</a>

Complex Images

If you have a complex image such as a graph or map you need to provide a longer description. This can be provided as text on the same page or as a link to a separate page with contextual information provided in the ALT.

<img src="bar-graph.jpg" alt="Rainfall measurements for 2013 - described below" />

The use of the 'longdesc' attribute is not recommended.

Images of Text

Avoid images of text unless it is a logo, screenshot or complex image such as a graph. Images of text must never be used to replace informative content or headings.

Charles Sturt Unversity Logo

<img src="logo.jpg" alt="Charles Sturt University Logo" /> 

If the logo is a link (usually to the relevant organisations website), the alt must describe the destination rather than the image.


Charles Sturt Unversity

<a href="http://www.csu.edu.au/"><img src="logo.jpg" alt="Charles Sturt University" /></a> 

Images with Captions

If an image has a caption it still requires an 'alt' and the text provided should be different in each instance.

Read the Guideline

  • Checklist

    chevron_right

    Key things to remember

    • Image has meaningful alternative text
    • Decorative images have null value alternative text
    • Combine adjacent image and text links
    • Image links contained within a link which has meaningful text
    • Provide long descriptions for complex images
    • Avoid images of text
  • Useful Links

    chevron_right