Text Equivalents Best Practices

While ensuring accessibility does not mean that the web resource should avoid using graphical elements, it is important that all non-text elements are accompanied by text equivalents. Non-text elements are not accessible to users relying on speech synthesizers and braille displays; some users may use text-based browsers that do not support non-text elements; some may have turned off support for non-text elements. Thus, text equivalents should be rendered in such a way that they effectively substitute non-text elements for variety of browsers and assistive technololgies employed by people with different disabilities. Text equivalents can also help all users find pages more quickly, since search robots can use the text when indexing the pages.

Non-Text Elements

Non-text elements that should be provided with a text equivalent include:

images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video.

HTML Elements for Text Equivalents

alt attribute for img and area elements

alt attribute provides a short text equivalent to orient the user to the purpose and/or content of the image.

longdesc attribute for img and frame

longdesc attribute is poorly supported by graphical browsers and assistive technologies, making it difficult for web developers to rely on this method for providing longer descriptions of images. In general, longer descriptions should be integrated into the web page, ensuring that the information is available to every one, including people with disabilities. The text, along with the image, provides people with the opportunity to use more than one way to understand the content.

object element

Ensure a text equivalent is provided through the content of the object.

Types of Images

http://las.uiuc.edu/units/biosciences

1. Icons and Branding

   alt attribute identifying the image should be provided for images that are icons or used for branding.

2. Text Images

   Texts should not be represented as images for styling purposes. CSS should be used instead to control font styles.

3. Image Links

   If images are used to link, alt attribute that identifies the destination of the link should be provided.

4. Decorative Images

   Images that serve no other functional purpose than decoration such as this example should be incorporated as background-image in CSS.