Accessible Design: Best Practices

Images and Multimedia

Text Equivalents || Captioning Multimedia || Flicker || Text-only Sites

return to top

Text Equivalents for Images, Media, and Scripts.

Non-text elements include: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video

Sample Code:

Image without alternate description:

< img src="../images/wacapp.gif" width="61" height="34">

Image with alternate description:

< img src="../images/wacapp.gif" alt="WAC Approved icon" width="61" height="34">

Put your mouse over each image to see the difference. Alternate descriptions are read by screen-readers and appear when an image is unavailable from the server or when the user chooses to "turn-off" or "hide" images in her browser.

Caption or LONGDESC?

Keep in mind, for simple content, a text equivalent may need only describe the function or purpose of content. For complex content (charts, graphs, etc.), the text equivalent may need to be longer and include descriptive information. The LONGDESC attribute is designed for these situations. However, the attribute is not yet fully supported by screen-reader technology.

For best results, use the ALT tag even with longer descriptions or include a caption immediately above or below the image and reference the caption in the ALT tag. For example:

Caption: Graph 2.3 shows the population of Chimps in each location: China = 1,590,000; Burma= 900,000; Laos = 500,000; Vietnam= 800,000; Bangladesh = 380,000; Thailand = 470,000; Cambodia = 855,000.

Code Example for Above:

<p class="caption">
<img src="../images/chimpgraphsml.gif" alt="Graph 2.3, refer to caption for description." width="300" height="154"><br>
Caption: Graph 2.3 shows the population of Chimps in each location: China = 1,590,000; Burma= 900,000; Laos = 500,000; Vietnam= 800,000; Bangladesh = 380,000; Thailand = 470,000; Cambodia = 855,000.</p>

Using LONGDESC and the D-LINK.

Because information may be useful to all users, not just screen-reader users, the WAC recommends including necessary long descriptions or image explanations in the form of a caption that appears above or below the image. However, sometimes it will be necessary to provide more detailed information than even a caption allows. If this is the case, you will need to use the LONGDESC method.

If you do decide to use the LONGDESC option, WCAG standards currently require you also use a corresponding D-link. Here's how it works: First, you create a separate HTML page that includes the long description or explanation of the image or object. Next, you link the image to that description in the LONGDESC attribute of the <IMG> element. Finally, you create a text link immediately following (to the right) of the image or object and the link text should read "d".

Here is an example:

d.

The cartoon above has a simple, short ALT tag and includes a link, both in the LONGDESC attribute and the D-link, to a more detailed description of what is happening in this cartoon. Hint: click on the "d" to read the long description.

Here is the code used to insert this image and d-link:

<p>
<img src="/tutorials/images/calvin-writing.gif" alt="Calvin and Hobbes cartoon." width="300" height="375" longdesc="/tutorials/bestpractices/calvin-writing.htm">
<a href="/tutorials/bestpractices/calvin-writing.htm">d</a>.
</p>

The potential problem with D-links is that using mulitple links on a page creates repeated link text that leads to different locations (an accessibility no-no). One way to address this issue is to number mutiple D-links (e.g., d1, d2, d3, etc.). As browsers develop more LONGDESC support, it will no longer be necessary to include the D-link as well.

return to top

Spacer Images.

Web page authors often utilize transparent graphics for spacing. Adding a text description to these elements will produce unnecessary clutter for users of screen readers. For such graphics, an empty ALT attribute is useful.

Example of source code: <IMG src="transparent.gif" alt="">

Empty ALT tags can also be used for images and graphics that are purely aesthetic, such as graphic dividers, borders, and lines. 

return to top

Testing for ALT tags.

To test your ALT tags, using Internet Explorer, go to the TOOLS menu and click on "Internet Options." Click on the "Advanced" tab and scroll down to the "Show Pictures" check box. Uncheck the box, close the dialog and reload your page. Do all of your image placeholders have ALT tags?

return to top

Captioning Multimedia

Two important elements of captioning are included in these guidelines: synchronization and auditory descriptions.

Synchronization insures that hearing-impaired users see the images associated with the caption. For instance, a video of a professor discussing a particular piece of art work shows the correct frame of the art as the professor draws attention to each element.

Auditory descriptions provide visually-impaired users descriptions of key elements in the visual track. For example, if the professor says "Don't these two look like they are having fun?" and the image being shown is a picture of two crying children, the caption would describe the picture to make the meaning clear. Also captioned would be other key visual elements including actions, settings, body language, and displayed text.

Synchronization also applies to auditory descriptions. Descriptions should not interfere with the audio or dialogue of a movie or presentation.

Example.

Caption for professor's lecture.
"Let's take a look at this example."
[puts image of decorative vase on overhead projector.]
[Vase is tall and thin, bud vase, in very pale blue with small etched flowers.]
" Notice the intricate etching in this piece. The artist clearly spent a great deal of time with this piece."

Captioning Resources:

NCAM -- National Center for Accessible Media -- offers a number of guides, resources and examples of accessible captioning and video.  Start at the Rich Media Accessibility section for Developers.

The Captioned Media Program -- (a joint venture of the US Dept of Ed and National Assoc of the Deaf) has a wealth of information.  Of particular interest:  "2005 Captioning Key: Guidelines and Preferred Techniques" [PDF] which provides detailed suggestions for font, colors, and placements.  Also, "Deaf Consumer's Views About Captioning" [PDF] -- is a research article that evaluated several different kinds of captioning and reports on consumer preferences for each.

return to top

Flicker

Definition: 2 to 55 Hertz equals 2 to 55 flashes per second.

While flashing and flickering elements often appeal to web designers to draw attention to information, changes and updates, or just to add aesthetic value, returning users and those who endure repeated loops of movement while trying to access needed information will quickly tire of your pages.  In addition, causing a page or elements on a page to flash or flicker can have serious effects on users with epilepsy and light sensitivity. Flashing and moving graphics can also be extremely distracting and just plain annoying to other users.

Here is an example of a page with too many flickering elements: North Royalton Police Department (archive) . [Note: this page is an archive from February 2003. Visit the updated and much improved site and note the difference: North Royalton Police Department (current)].

If you must include flashing or flickering elements on your page, be sure animation changes at a slow enough rate to avoid injury to your visitors.  Also, consider timing-out animated elements, so elements stop moving after a certain number of seconds or a specified number of animation loops. 

To see examples of different flicker rates, visit the National Center for Accessible Media (NCAM): Examples of Flicker Rates.

return to top

Providing Equivalent Versions.

OSU Minimum Standards for Web Accessibility require that text-only or other accessible alternate versions of your primary site remain current with primary site.  You must have a system in place to insure content of alternate versions is updated as frequently (preferably simultaneously) as the primary version.

Thus, when using the text-only alternative, the WAC recommends using auto-update software, like LIFT Text Transcoder, which creates a server-generated text-only version on demand. Other database solutions are also possible with simple PHP or ColdFusion coding.

Keep in mind, OSU Minimum Standards for Web Accessibility and Section 508 require that an accessible alternative version of your site be used ONLY IF you are unable to make your primary site meet the standards.  Text-only or alternative versions should be seen as last resort options and not the lazy-coder's solution to poorly designed sites.

return to top

Next