Informative Images Overview

Overview

Tyeps of infomative images include:

Pictures and other bitmapped graphics
Charts, examples include:
- Bar Charts
- Pie Charts
- Organizational Charts
- Flow charts
Maps
Scatter plots
Diagrams
Mathematical Equations

The type of text equivalent needed for an informative image depends on the purpose and information the image represents. For example, a news photograph of a public official is probably just highlighting or drawing attention to an article or story associated with the official, and a simple alt text can be used to fully describe the purpose of the image. A bar chart, on the other hand, conveys numerical information; the proper text description of a bar chart is a tabular data table, probably with some additional numerical summary information, so that a person using speech synthesizer can access the numerical relationships and trends vsiually represented in the chart. In cases of mathematical equations, text equivalents should also be available as MathML.

Benefit to People with Disabilities

Understand the purpose and content of informative images.

Benefits to All Users

Cell phone, PDA devices and text only browsers allow people to understand the image before it is downloaded or if the browser will not render the image
Meaningful alt attribute content helps users identify images on your website.

Benefits to Developers

Meaningful alt attribute content helps search engines identify relevant images on your website.

Related Resources

HTML Markup Details

alt attribute: The alt attribute should provide a short text equivalent to describe the purpose of the image on the web resource and orient the user to the content contained in the image.
Integrate text equivalent into content of web resource with image: Addition information about the image should be integrated into the content of the web resources, so that the information is available to all users. Since everyone has their own style of learning, making the more detailed text equivalent available to all users enables the users to better understand the content contained in the image.
longdesc attribute pointing to internal link: This HTML markup is not well supported in graphical browsers and therefore difficult for authors to test and users to access and is not recommended for adding text equivalent information beyond the alt attribute. The best way to use the longdesc attribute is to build an internal link as the content of the attribute. This internal link would direct to the content on the current resource that provides the text equivalent information (longdesc="#linktext").

Non-Recommended Techniques

longdesc attribute pointing to external uris: The longdesc attribute is not well supported in graphical browsers and therefore difficult for developers to test. This lack of support also makes the use of longdesc less useful to users since they can not use the information to understand the image.
D-Link: The use of D-Link is an alternative to using the longdesc attribute due to the poor support for access in browsers to the longdesc attribute. Since D-Link is just a simple link with the text "d", it is supported by all browsers. The problem with D-Link is that the "d" is not descriptive of the image that the link is associated with; also, if there are multiple images and D-Links on a resource, the user cannot tell from just the link text which image a D-link is associated with. Authors who do not like D-Link from a visual asthetics point of view can hide D-links using CSS techniques; however, this also hides the link from people who do not use assistive technologies for the visually impaired but still could benefit from the additional information the link provides.

Related Accessibility Requirements

Illinois Information Technology Accessibility Standards: 4.1 - Provide appropriate "alternate text" for all images.; 4.2 - Provide full descriptions for graphs, diagrams, and other meaningful images.
Section 508: 1194.22 (a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
W3C Web Content Accessibility Guidelines 2.0: 1.1.1 Non-text Content
Web Content Accessibility Guidelines (WCAG 1.0): 1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). [Priority 1]; 3.1 When an appropriate markup language exists, use markup rather than images to convey information. For example, use MathML to mark up mathematical equations, and style sheets to format text and control layout. Also, avoid using images to represent text -- use text and style sheets instead. [Priority 2]