Georgia Tech Research Institute

What is the best way to provide text equivalents for non-text elements?

The first thing you need to ask yourself is: "Does this visual element really need to be described to my site visitors?"

If you are using graphics for the sole function of visual formatting, providing a description is unwise; it will only distract from the page content. For example, if you have a shiny gold bar underlining your navigation to separate it from the page content, it will be cumbersome for a screen reader user to listen to a description ("shiny gold bar") when tabbing from navigation to content. To satisfy Section 508 requirements, these images will require an alt attribute, but you can facilitate usability by simply leaving the text portion blank (alt=""). A better alternative is to use CSS image positioning for images employed solely for visual effect; this will provide the same visual experience without requiring a screen reader user to tab over anything.

If the image conveys important information - such as images used as navigation links or pictures and charts supplementing your page content - it is very important to provide a text equivalent. Note: Images essential to navigation should never be placed on a page through a style sheet, as they will not then be conveyed to a screen reader. Essential images should be placed on the page using the <img> tag.

The Section 508 standard 1194.22(a) lists some examples (e.g., alt, longdesc) of how to go about providing text equivalents. Charts or tables MUST have an extended description that accurately conveys their content. Simply writing "chart showing results of data" is insufficient; the information conveyed should be accurately described, as succinctly as possible. For pictures illustrating a tone or mood you may wish to convey, a good method is to have both a 3-5 word alt attribute and a long description of 1-3 sentences, or more if required. This will allow a screen reader user to access the longer description, but does not require the user to hear it every time that he/she returns to the page.

Text equivalents can also be provided through use of a figure caption, content in the surrounding text that describes the image, or other methods. The key is to provide some textual understanding of any images that provide useful information to the user of the site.

Alt tags are not required for items such as spacer images, and in fact, would only clutter up the auditory representation of the page content. The use of blank alt attributes (alt="") is fine if that is desirable in your HTML coding schema; it is not desirable to use something like alt="spacer". Automated checkers may flag use of this code as problematic because it does not provide any information about the image, but there is nothing inappropriate about its use since text descriptions can be provided in alternative ways.