Creating ALT text

A text equivalent for every non-text element (audio tracks, images, etc.) should be provided.

  • Every image, Java applet, Flash file, video file, audio file, plug-in, etc. should have an alt description.
  • Complex graphics (graphs, charts, etc.) should be accompanied by detailed text descriptions.
  • Alt descriptions for images used as links should note the link destination.
  • Decorative graphics with no other function should have empty alt descriptions (alt= ""), but should not be missing alt descriptions.

When creating "alternative text" aim for a functional label based on the context in which the component being described (most often an image) is used rather than a visual description. Imagine reading the document aloud over the telephone. What would you say upon encountering this image to make the page comprehensible to the listener?

Most authoring tools provide a space for you to enter this information, or you can add alternative text with the "alt" attribute of the IMG element. For example, use a tag like the following:

<img src="jjoyce.jpg" alt="James Joyce as a young man">

To do this in HTML (and in the code view of Dreamweaver), set your cursor down after the source name of your image (for example "joyce1.gif”), type alt=””. Within the quotation marks, type the text as you would like it to be spoken by the user's screenreader application.

When using Dreamweaver, you can also designate alternative text in the Image Properties Panel (usually at the bottom of the screen)—simply type the text into the alt field. See below:

James Joyce as a young man

Image Properties Panel

Dreamweaver also features accessibility dialog boxes. Just click Edit>Preferences>Accessibility and check the "Images" checkbox. Then, whenever you insert an image, the following dialog box will pop up:

Image Tag Accessibility Attributes

You can add your alternative text here instead of in the properties panel. Additionally, you can choose to use the "longdesc," or long description, attribute (see the second text box in the dialog box above). Because screenreaders typically read only 150 characters or less of alternate text (the example above is 26 characters, including spaces), you may need to describe an image in more detail in another file (e.g., jjoyce.html):

<HTML>
<HEAD>
<TITLE>James Joyce as a Young Man (Long Description)</TITLE>
</HEAD>
<BODY>
A black and white photo of a young James Joyce standing outside, and in front of, an open windowpane.
He wears a vest over his shirt and tie as well as a crumpled sport-jacket. His hands are in the pockets of his 
wool trousers and his head, which tilts to his right, is topped with a sailor's cap. His face is expressionless.
</BODY>
</HTML>

The tag in the calling document (the one with the IMG element) would now look like the following:

<IMG src="jjoyce.jpg" alt="James Joyce as 
a young man" width="234" height="373" longdesc="jjoyce.html">

Presumably, a user can now click on the image and go to the "jjoyce.html" file. Unfortunately, most browsers (including Internet Explorer) do not support this attribute. So it is better to make a caption for each of your images and use this caption as a link to the long description file (when necessary).

Even sighted users may benefit from having access to a long description. It is debatable as to whether this particular long description is necessary, accurate, or at all interesting. However, if you use an image of a chart in your document, a long description may be the best way for you to insure equitable access to information for visually impaired users.

To specify an "alt" attribute with Microsoft FrontPage, right-click on the picture, choose Picture Properties, and then find the text box for Alternative Representation in the Picture Properties dialog box.

For client-side image maps, either use the "alt" attribute with the AREA element, or link-text with A elements (see Image Map Guidelines). For the former method, Dreamweaver provides a Hotspot Properties Panel that includes a text box for entering alt text. This panel will appear when you use any of the hotspot tools from the Image Properties Panel:

Hotspot Properties Panel

The <APPLET> tag for Java applets also accepts an "alt" attribute, but it only works for browsers that provide support for Java. Often, users with slower internet connections will turn support for Java applets off. A better alternative for providing textual descriptions is to simply include the alternative text between the opening and closing <APPLET> or <OBJECT> tags. For instance, if a web designer wanted to include an applet called MyCoolApplet in a web page, and also include a description reporting that the applet shows a stock ticker displaying the current price of various stocks, the designer would use the following HTML coding:

<APPLET code="MyCoolApplet.class" width="200", 	
height="100">This applet displays current stock prices 
for many popular stocks.</APPLET>

Finally, yet another way of providing a textual description is to include it in the surrounding context:

<p>..it seems strange to be back. 
Below is a picture of me during my great vacation!</p>
<IMG src="pictureofme.jpg">

Alt descriptions for images used as links should note the link destination.

Link text should be identical or closely related to the title of the destination page or object. When an image is used as a link, however, the image is often used in the place of the link text, so the alt attribute of the IMG element should be used to indicate the destination, whether or not the image itself is also described. For example:

<a href="jjoyce.html"><img src="jjoyce.jpg" 
alt="James Joyce as a young man, link to long description" 
width="234" height="373" longdesc="jjoyce.html"></A>

Decorative graphics with no other function should have empty alt descriptions (alt= ""), but should not be missing alt descriptions.

If descriptive text is already provided above or below the image, an empty description, alt="", may be used in the IMG tag. In other situations where alternative text is unnecessary or distracting, such as images used as spacers, bullets in lists, and links that also contain text, alt="" should still be included so that non-graphical browsers know to ignore the image. Do not use this technique if the image is a link or is important for understanding the page.

For more information, see the World Wide Web Consortium's Core Techniques for Text Equivalents.