Text Equivalents Overview
Images and graphics are an important part of web sites and most web developers are concerned that their web resources are visually appealing to users. There is often a misconception that the use of graphics and accessibility are at odds with each other. For many types of disabilities, graphics actually enhances the accessibility of web resources. The accessibility of web resources really has nothing to do with the graphical effect the author envisions and has everything to do with the markup used generate that graphical effect or content.
The major task of making accessible graphics involves considering the purpose of the image in the web resource and then determining the markup needed in that resource. The simplistic approach of adding ALT text to every image may satisfy the needs of some automated web accessibility checking tools but does not necessarily make web resources more accessible or usable to people with disabilities. For example, images that are used for styling or positioning need to be converted from in-line images to CSS styling techniques. This technique supports the device interoperability principle of all W3C specifications (the fundamental reason the web was first developed) so the web resource will automatically be accessible to a wide range of web technologies like graphical, text, braille, PDA, and cell phone browsers. Other images are more informative and need text equivalents. The type of text equivalent needed is dependent on how the image is used within the web resource.
Text Equivalents Quick Reference
This table provides a quick overview of what types of text equivalents are necessary for different uses of images. The select menu categories from the navigation menu to see more in-depth commentary and examples.
| Image Usage | Requirements | Accessibility Details |
|---|---|---|
| Spacing/Positioning | CSS | Convert to CSS; use the margin, padding, and positioning properties |
| Borders | CSS | Convert to CSS; use the border properties |
| Bullets | CSS | Convert to CSS; use the list properties |
| Separators | CSS | Convert to CSS; use the list properties |
| Backgrounds | CSS | Convert to CSS; use the background properties |
| Logos | Short Text Equivalent | Alt text is the organization's full name and includes the description "Logo" |
| Links | Short | Alt text describes the link target |
| Text Styling | CSS | Reconsider necessity of decorated text, use CSS properties (text and font) when applicable, and provide alt text with the information the decoration was intended to convey |
| Icons | Short | Use short alt text equivalents like "Up" and "Back" |
| Graphs | Long Text Equivalent | Alt text summarizes the main point of the image and either a link or on-page information provides quantitative information |
| Tables | Long | Alt text summarizes the main point of the image and either a link or on-page information provides quantitative information |
| Diagrams/Charts | Long | Alt text summarizes the main point of the image and either a link or on-page information describes the important relationships in the image |
| Maps | Long | Alt text and or longdesc link includes location, orientation, spatial relationships, and other important content relationships (e.g. for those things that appear in the map key) |
| Math | MathML, Long | Use MathML. If images of rendered equations are also used, alt text should be LaTeX (pdf) or well-known formats for equation description. If appropriate, provide a natural language summary in the alt text or longdesc links |
| Photographs | Long | Alt text describes the scene, important relationships between objects in the scene, important text on signs, the identity of famous people or places. The alt text is not the place for informing the user of unknown people, places, or objects |
| Artwork | Long | Alt text includes the emotional and technical aspects of the artwork, especially for lesser-known works |
| Thumbnail Previews | Short | Alt text is a very short description of the image or what is meant to be conveyed by the image; notify user the image is a "thumbnail" |
| Animated Images | Short+Animation Control | Animation may be stopped and ALT text describes the content of the animation |
| Comics | Long | Consider linking to a description in movie script form |
| Scanned Text | Long | Convert to HTML or provide links to an HTML representation |
| Languages (non-Latin alphabets) | Character sets | Use Unicode fonts or, if images are required, provide text equivalents in an accepted transliteration |
| Signup Images (CAPTCHA) | CAPTCHA alternatives | For images intended to confuse automated signup programs on sites that require a login and password, provide an alternate, accessible verification method |
| Advertising Banners | Short | Set alt="" or, if alt text is required, prominently indicate that the text is an advertisement by prefacing text with "Advertisement:" |
| Advertising Interstitials | Short | Provide short alt text and prominently indicate that the text is an advertisement by prefacing text with "Advertisement:" |