Some people cannot see images or hear sounds. A text equivalent to these non-text elements, including applets and graphical representations, should therefore be provided. The text equivalent (a description) can be output to speech synthesizers and Braille displays. For the blind, visually impaired and people with reading problems or cognitive disabilities, speech synthesis is essential for accessing the information on a web page, just as text equivalents of audio and video material are for the deaf and hearing-impaired.
Visually impaired people and people with learning disabilities can use speech synthesis, get access to information on a web page, on condition that text equivalents for non-textual information are available. Hearing impaired people can use software to translate written text into sign language. Blind people and people who are deafblind have access to the text equivalents using Braille displays.
On a web page, when you place the cursor in Internet Explorer on an image with your mouse, the descriptive text appears. People using a Braille display, for example, will be able to read the description on their display. The example below shows an image from a website with a description of the image itself as the alternative text (alt text). The second example shows an image used as a link to another page and therefore has the link target as the alternative text. The description does not need to say that an image or a link is involved (i.e. not 'link to home page'). This information can be provided automatically by assistive technology.
When an image has no alternative text, assistive technology often presents the whole file name. The screen shot below is taken from a web page in a browser used by many visually handicapped people. The top part shows what a standard browser displays. Below that is the information output to speech or Braille. The image on the left in the screen shot (Google) is a standard image with alt text and the image on the right is a link to another page.
Text descriptions can easily be added to images by using the alt attribute for the <img> element ('alt' stands for 'alternative text'). The alt text must be functional: with an image used as a link, the link target should be described.
<img src="house.gif" width="10" height="10" alt="small house">
Images that provide no extra information, such as decorative images and spacers (images used only for page lay-out), should have an empty alt attribute linked to them, because the output for an image that has no alt attribute is the file name. This can be very confusing.
<img src="spacer.gif" width="10" height="10" alt="">
When an image contains more information than is possible to describe in an alt text (e.g. a complex graphic), a description link can be provided with the image. This link, known as a 'd-link', should take the user to a page that describes the image. The 'longdesc' attribute is the official way of describing a complex image, but this is not yet adequately supported by browsers or assistive technology.
<a href="description.html"> d </a>
If the object element is used to place an image, the text equivalent can be provided in the content of the object element.
<object data="house.gif" type="image/gif" height="100" width="100"> Place the short or long description (or link to a file with a long description) here. </object>Java applets can also be used to provide text descriptions (but since the applet is a deprecated HTML element, it is better to use <object>). This can be done in a number of ways.
<applet code="Blink.class" width="500" height="40"> <param name="lbl" value="short description of the content of the applet.">
<param name="speed" value="1"> If you were using a browser that supported Java, the following text would be displayed. </applet>
When using script languages, a <noscript> element should be employed to describe the scripts´ functionality. This element can be used to provide information that would otherwise be lost with a browser that does not support script languages (see also WCAG 1.0 Checkpoint 6.3):
<noscript> Here is a description of the content that is generated if the script is not supported.</noscript>
When an image map is used for navigation or other purposes, it is important that the active parts of the image (the hotspots) that link to another document are provided with an alt text. This is not possible with server-side image maps, so the use of client-side image maps is recommended (see WCAG 1.0 Checkpoint 1.2).
<img src="imagemap.gif" alt="navigation image" title="Image with two items: A house and a tree." usemap="#map1"> <map name="map"> <area coords="0,0,39,39" href="page1.htm" alt="page 1"> <area coords="40,0,79,39" href="page2.htm" alt="page 2"> </map>
Multimedia and sound/video fragments are also non-text elements used in web pages, so these should be provided with text equivalents as well. See the explanations of WCAG 1.0 Checkpoint 1.3 and WCAG 1.0 Checkpoint 1.4 for more details.
