Skip to content | Change text size
 

Making images and multimedia accessible

Making images accessible

When images provide information, you must provide a text equivalent for them

Where an image is used to provide information, a text equivalent must be provided by using the alt attribute.

<img src="openday.jpg" alt="Monash University Open Day, 2 and 3 August" />

Some images require a longer description. There are two recommended ways of doing this.

First, the longdesc attribute can be used. It should link to a page giving a full description of the image.

<img src="room.jpg" alt="A student room at Halls of Residence" longdesc="room-description.html" />

However, some older screen readers and text browsers do not recognise the longdesc attribute, so you must always also use a visible link to the long description. The screenshot below shows an example of this approach as used on the Monash senior management page. The page lists the senior management at Monash in a hierarchical chart format. The chart is an image. A longdesc attribute together with a visible link to a text description of the image are provided.

Screenshot showing the senior management page

An alternative is to give a full description of the image on the page on which it is used. This is the approach used on this page to describe the image above.

When images are used for decorative purposes, no text equivalent is needed

Where images are used for decorative or layout purposes, the alt attribute must still be used, but should not contain any content. The best approach is to use an alt attribute that contains a space. The space is a workaround for older screen readers. They attempt to alert users to the existence of an image by substituting the file name. Newer screen readers accept that an empty alt attribute is deliberate, and ignore it. Using this workaround causes a small square to appear when a user mouses over an image when using Internet Explorer. To avoid this, use an empty title attribute in conjunction with a space in the alt attribute.

Where an alt attribute is missing, screen readers and text browsers will alert users. Sometimes the file name will be displayed, or the word "image" or similar may be used. This can cause unnecessary confusion. It is not acceptable to omit the alt attribute.

Wrong: <img src="spacer.gif" />
Right: <img src="space.gif" width="100" height="1" alt=" " title="" />

Making multimedia accessible

Flash

Recent improvements have been made to Flash, but the format is not considered fully accessible. In August 2002, the Australian Human Rights and Equal Opportunity Commission issued the following statement on the use of Flash:

"... work is currently underway to make Macromedia's Flash technology accessible to people who use screen-reading software. While some positive progress has been made, it will be a considerable time before most users will benefit, and even then, Flash may be accessible only in certain specific circumstances. It is certainly wrong for web designers to assume that improvements in the accessibility of a technology mean that it can be used indiscriminately without regard for the principles of accessible web design."
  • An alternative accessible version must be provided for all Flash content.
  • Never use Flash as the default format for content on a page. Provide it as option that users can choose.
  • Never use Flash for navigation.

Video

See: Making videos accessible

Audio

To provide accessible audio:

  • provide transcripts
  • provide captions and descriptions (text describing the non-verbal parts of the audio).

Captions can be created for a range of multimedia formats. Tutorials for Quicktime, Real Player and Windows Media Player are linked below.

Resources