1. Accessibility & Legislation
  2. Common Issues
  3. Testing & Tools
  4. Analysing Your Site

2.01.01 Text equivalents: Overview

Images

Every image on every page of your site requires a text equivalent. Commonally called "alt text" or sometimes mis-quoted as "alt tag". It is specified in the alt attribute of the <img> element in the HTML code.

<img src="image.gif" width="???" height="???" alt="alternative description here" />

The "alt text" should reflect the function of the image in relation to the content so:

If the image has no meaning:
Use a blank or null alt text e.g. alt="".
If the image conveys the same meaning as written in the content text:
Use the shortest description possible, to the point of being curt.
Or use a blank or null alt text e.g. alt="" if the image is not mentioned in the text.
If the image adds meaning to the content:
The alt text should succinctly reflect that additional meaning.
If it is not possible in less than 65 characters link to a full description elsewhere.
If the image is used as a heading:
The alt text should directly reflect the heading text.

Assistive technologies already state that an image is present so alt="image of..." or alt="photo of..." is superflous. It should also be noted that if an alt attribute is not present that screen readers read out the file name.


Other non-text objects

Images are not the only web page objects that require a text equivalent.

Text equivalents are required for all non-text content that can be expressed in words such as img, area, object, Flash insets, video insets and optionally for input and applets.

Objects and applets

Object and applet non-text objects do not use the alt attribute. Instead it is supplied in the content of the element.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"
  id="keystage" width="100" height="100">
  <param name="movie" value="keystage.swf">
  <param name="quality" value="high">
  <param name="bgcolor" value="#43A5FF">
    Alternative text here
</object>

Next: Images in context