Home -> (Resources) -> (WCAG 2.0) -> Text alternatives

Please also see my current work at The Enabled Web.

Text alternative examples

Situations, techniques, and tests are from the W3C WCAG 2.0 Draft. These examples also map to Section 508 paragraph 1194.22(a); please see Wayne Dick's CSU Accessibility Standards for Custom Websites for further information.

1.1.1 Situation A: If a short description can serve the same purpose and present the same information as the non-text content:

G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content using a short text alternative technique listed below

3. H37: Using alt attributes on img elements (HTML)

Example from my home page at CSU Long Beach:

Tom Jewett, home page

Photograph of Tom outside Brotman Hall, 2001

Code excerpt for home page example above:

<img src="tj-name.gif" alt="Tom Jewett, home page" height="50" width="173" />
<img src="tj-pix2.jpg" alt="Photograph of Tom outside Brotman Hall, 2001" height="209" width="173" />

1.1.1 Situation B: If a short description can not serve the same purpose and present the same information as the non-text content (e.g. a chart or diagram):

G95: Providing short text alternatives that provide a brief description of the non-text content using a short text alternative technique listed below AND one of the following techniques for long description:

G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description

Example from my Color Tutorial:

RGB color diagram, description follows

Primary colors:

red, green, blue

Secondary colors:

yellow = red + green,
cyan = green + blue,
magenta = blue + red

All colors:

white = red + green + blue (#FFFFFF)
black = no light (#000000)

Code excerpt for color tutorial example above:

<img src="rgb.jpg" alt="RGB color diagram, description follows" height="256" width="256" />

Situation B, another technique:

G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content

Example from my online text, Database Design with UML and SQL:

Class diagram

Customer-order class diagram

This diagram can also be understood in the form of a data dictionary (text)
or viewed as an enlarged image

Code excerpt for database diagram example above:

<img src="association-custorder.gif" alt="Customer-order class diagram" height="149" width="357" />

Tests

Procedure

  1. Remove, hide, or mask the non-text content

  2. Replace it with the text alternative

  3. Check that nothing is lost (the purpose of the non-text content is met by the text alternative)

  4. If the non-text content contains words that are important to understanding the content, the words are included in the text alternative

Expected Results