Web Accessibility Best Practices

Campus Information Technologies and Educational Services (CITES) and Disability Resources and Educational Services (DRES)

University of Illinois at Urbana/Champaign

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.

Accessibility Requirements for Images
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:"