Informative Image Overview
Types of informative images include:
- Pictures and other bitmapped graphics
- Charts, examples include:
- Bar Charts
- Pie Charts
- Organizational Charts
- Flow charts
- Scatter plots
- 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 summary information, so that speech reader users can access the numerical relationships and trends visually represented in the chart. In cases of mathematical equations, text equivalents should be available as MathML.
Text equivalents for informative images that contain additional information should be integrated into the visual rendering of the web resources so that the information is available to all users. Since everyone has a unique style of learning, making the more detailed text equivalent available to all users often yields better understanding of the content in general.
- Screen reader users can understand the purpose and content of informative images.
- Users navigating web resources with cell phone, PDA devices or text-only browsers can understand the image before it is downloaded or if the technology does not render the image.
altattributes help users identify images on your website.
- The ranking of web resources improves as search engines can better identify images that are relevant to the search topic when
altattributes are meaningful.
- W3C WCAG 1.0 Image techniques
- Cynthia Says (HiSoftware AccVerify/AccMonitor) Alt Text Quality Checks
- WebAIM alt text quality checks
- ATRC Web Accessibility Checker
- 17: Images in HTML (Opera Web Standards Curriculum)
altattribute 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.
longdescattribute pointing to internal link
longdescattribute of an img element specifies a link to a long description of the image.
- This HTML markup is not well supported in graphical browsers and therefore difficult for authors to test and users to access.
As the result, using
longdescattribute to add text equivalent information beyond the
altattribute is not recommended.
- The best way to use the
longdescattribute 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").
- 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]