Text Alternatives for Images
Roger Hudson, September 2003
Images are the key accessibility issue and the need to provide equivalent text alternatives for images is the first accessibility Guideline in both the W3C Web Content Accessibility Guidelines (WCAG) and the U.S. Section 508.
Text alternatives can be a great benefit to people who are blind or have impaired vision. They also benefit people who use the web without images - for example text-only browser users and people who turn off images to increase site speed.
"Provide equivalent alternatives to auditory and visual content."
Web Content Accessibility Guideline 1
As can be seen, the requirement to provide an "equivalent alternative" covers more than just stand-alone images such as a photograph, drawing or graphic. It encompasses a wide range of other non-text elements including image map regions, graphical representations of text, animations, applets and programmatic objects, frames, scripts, spacers and buttons as well as audio and video material.
While accessible alternatives should be provided for all non-text Web page content, the lack of appropriate text alternatives for standard images such as photographs, graphics, charts and tables is still one of the most significant accessibility barrier at this time.
Text alternatives for images can be provided in three ways:
1. Alt Attribute
Every single image on a website should use the alt attribute in the <img> tag - without exception.
If no alt is present:
- No text is displayed on the screen.
- Screen readers are unable to describe the image.
- Many audio and Braille screen readers (also text-only browsers) will then display the full address for the image - very boring!
Writing Good Alt Text
Keep it short: There are differing opinions about the optimal length of an alt text. However, in essence they should be as short as you can while still conveying the information. Often this can be done in two or three words but sometimes requires more.
Make it meaningful: Think about the aim of the image and try to convey that. For example, if a picture is intended to show a particular architectural feature then an alt that just contains a general label such as "Cathedral" or gives its name, "Chartres Cathedral" will probably not be enough. The alt should also briefly describe the feature that is being illustrated - "Flying buttresses of Chartres Cathedral"
Using Initials: If the alt uses initials as a name or abbreviation, for example AMP or DOD, screen readers will attempt to read these letters as a word. If you want the letters to be read individual you needed use capital letters and put a full stop after each letter in the alt text.
Alt Text Problems to Avoid
- Don't use the image file name as the alt. Alternative text like "02_cc_68.gif", or even "building.jpg" are neither descriptive nor helpful.
- Avoid unnecessary terms. Don't use words like 'link' or 'click here' for images that are links. Screen readers will indicate if something is a link or not.
- Don't use alts for message. The alt text is usually displayed while an image is loading. Although the user maybe staring blankly at the screen waiting for the image to appear don't use the alt to present advertising or promotional statements during this time. Also, don't use words like 'image loading' as alt text.
- Never use the alt to tell people to turn images on if they want to see a picture or use the page.
Empty (Silent) Alts
While the alt attribute should always be used, it is really only there to convey something of value.
Today many Web pages use images like small transparent gifs or curved corners for purely layout or decorative purposes. Imagine, if you will, what it is like to hear the words "graphic spacer" fifteen times and "graphic corner" eight times as you attempt to get to the content of a Web page with a screen reader just because the words have been used as the alts for all these images.
Spacer gifs and images that are purely for layout (eg curved corners) or decorative purposes should use an empty or "null" attribute , that is alt="".
Deciding when to use alt="" is a judgement call. Clearly, all images that are required to navigate or function within a site must have an alt tag that contains an appropriate text alternative.
While it is generally agreed however, that the alts for transparent gifs and decorative images like curved corners should be empty, there is differences of opinion among accessibility experts and people with impaired vision when it comes to actual images on the page.
If you are in doubt about whether to include alt text for an image you should err on the side of inclusion since too much accessibility is always better than too little.
2. Title Attribute
The "Title" attribute is commonly used to generate onscreen 'tool tips' and can be applied to many HTML elements including images.
The Title attribute can be used to improve accessibility and its use is advocated by accessibility expert Joe Clark ("Building Accessible Websites, New Rider Publishing). Joe Clark suggests using alt to provide a brief description and Title to provide more detail or information. Support for this approach how is not universal.
Since browser and assistive technology support for the Title attribute is not as great as it is for alt, Title should not be used in place of the alt attribute. If you use the Title attribute consider including the text within [square brackets] so that they are visually different to the alt tags.
3. Long Descriptions (longdesc)
The recognised HTML 4.0 attribute 'longdesc' is included in the WCAG 1 and is the recommended way of providing a long description for a image. The longdesc for an image is actually contained within a separate html file. The inclusion of an attribute like this, longdesc="building.html", within the <img> tag will allow user agents that cannot display images, but support longdesc, to provide the long description page.
However, very few browsers and screen readers support 'longdesc' at this stage. As a result, some people are advocating the inclusion of an additional "d" link to the description file immediately after the image on the page.
Slice and Dice Images
A single large image for a Web site is sometimes made up from a number of small images each with its own <img> element. This raises the accessibility question of how to provide a text equivalent for the image.
The inclusion of descriptive alt text for all the images would result in assistive technology users being presented with all these alts. This could lead them to believe that a sighted person could see many different images on the Web page, which would not be the case.
The most effective way of improving the accessibility of a sliced image is to provide a descriptive alt text equivalent for the first image slice (that is the top left image) and then use a null alt (alt="") for all the other slices. In this way assistive technologies will ignore all the null alts and the users of these technologies will be told there is one image and get a description of that image.
References And Additional Information
Books
- Clark, Joe. 2003. "Building Accessible Websites" New Riders Publishing, Indiana.
- Paciello, Michael. 2000. "Web Accessibility for People with Disabilities", CMP Books, Kansas.
- Slatin, John and Rush, Sharon. 2003. "Maximum Accessibility", Addison-Wesley, Boston.
Websites
- World Wide Web Consortium. "Web Content Accessibility Guidelines 1.0."
- Thatcher, Jim. "Web Accessibility for Section 508"
- Pilgrim, Mark. "Dive Into Accessibility"