Text Equivalents for Images and other Non-Text Objects 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 readers and braille displays. Some users may use text-based browsers that do not support non-text elements, and some may have turned off support for non-text elements. Thus, text equivalents should be rendered in such a way as to 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 that should be provided with a text equivalent include:
- graphical representations of text (including symbols)
- image map regions
- animations (e.g., animated GIFs)
- applets and programmatic objects
- ASCII art
- images used as list bullets
- graphical buttons
- sounds (played with or without user interaction)
- stand-alone audio files
- audio tracks of video
HTML Elements for Text Equivalents
altattribute provides a short text equivalent to orient the user to the purpose and/or content of the image.
longdescattribute 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.
- Ensure a text equivalent is provided through the content of the object.