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>