The law states:
"A text equivalent for every non-text element shall be provided (e.g., via "
longdesc", or in element content)."
Screen readers can only convey information in a text format. This means that you must provide text alternatives for all non-text elements. This tutorial will focus mainly on images, since they are the most common type of non-text elements. There are two ways to provide text alternatives for images: alternate text (
alt attribute) and long descriptions (
longdesc attribute). Additional information about the image can be provided using the title attribute.
Use the alt attribute to give an image a short description. Try to keep alternate text as short as possible while still conveying the meaning of the image. The alt attribute does not inherently have a size limit, but a good rule of thumb is 50 characters or less. Images that do not have meaning, such as decorative images or transparent images used for spacing, should have empty alternate text (
alt=""). Use your best judgment when deciding whether an image has an important meaning or not. Never omit the alt attribute for any image.
Use the longdesc attribute to provide a long description of an image. When alternate text is not sufficient, the
longdesc attribute provides a link to another web page with a more detailed description of the image. Only screen readers can navigate to this link. The web page containing the long description should be text only and as simple as possible.
The following examples illustrate how alternate text and long descriptions should be used for different instances of images. After you have added alternate text and long descriptions (where appropriate) for all your images, you can verify the correctness in a web browser by pressing F12.
If the image is a drawing or a photographic picture, make sure that the alternate text adequately describes the content of the picture in 50 characters or less. If the image requires more than 50 characters, write a short alt text and add on a
longdesc attribute, which is explained in Complicated Images.
HTML code: <img src="/images/bigbambino.jpg" alt="Babe Ruth swinging a bat." />
Text Image (non-linked)
If the image is not linked and contains text, make the alternate text correspond to the image's text. For example, the alternate text for the image below is "Universal Design - Think before you teach, buy, design." Don't add additional text to the description such as "photo", "logo", "image", "picture", etc.
HTML code: <img src="/images/ud-small.gif" alt="Universal Design - Think before you teach, buy, design" />
If the image is linked, describe the image using alt text and describe where the link is taking the user using the title attribute. The screen reader tells users that the image is a link, so mentioning "link" in either description is redundant.
HTML code: <a href="index.html"><img src="/images/cplogo.jpg" alt="Cal Poly" title="Go to Cal Poly Home" /></a>
If the linked image does not have any text in the image, the alt text attribute should describe the image and the title attribute should describe where the link takes the user.
Decorative images have no added meaning to the web page, so their alternate text should be empty. To make alternate text empty, type two double quotes with nothing in between (
alt=""). Spacer images, images that help with formatting, and background images are good examples of images that should have empty alternate text. You should never omit the altattribute for any image.
HTML Code: <img src="/images/spacer.gif" alt="" />
longdesc attribute for images with complex content, such as charts, paintings, maps, organizational charts, diagrams, etc.). Alternate text is designed to be quick and short, while long descriptions provide an in-depth description of an image. You still need to use the
alt attribute if you decide to use the longdesc attribute. This way, your users can decide whether they want to skip or hear the long description based on the alternate text.
longdesc attribute provides a link to another web page with a complete description of the image content. The long description web page should be text only and as simple as possible. Sighted users will not see the link on the page, but a screen reader can navigate to the long description if the user decides to do so. The long description page opens in a new browser window.
As an alternative to using the
longdesc, the image can be described in detail on the web page that contains the image. This is considered a best practice because the information is available to all users.
HTML Code: <img src="/images/graph.jpg" alt="Baseball Player Salaries graph." longdesc="atbatntl_desc.htm" />
The atbatntl_desc.htm file should contain something similar to the following:
- This graph compares the average American salary and the average baseball salary in four different years.
- 1947 - Average American salary was two thousand dollars. Average baseball player salary was eleven thousand dollars.
- 1967 - Average American salary was five thousand dollars. Average baseball player salary was nineteen thousand dollars.
- 1973 - Average American salary was nine thousand dollars. Average baseball player salary was thirty-six thousand dollars.
- 1999 - Average American salary was twenty-nine thousand dollars. Average baseball player salary was 1.57 million dollars.
Testing for Alternate Text
For testing techniques and tools, refer to Checkpoint A (text equivalents) in the CSU Cal Poly Section 508 Manual Website Evaluation Guide found in the Tools section of the Accessibility Compliance Guide.