Web Development
Web Developer Guidelines
Visual Design Recommendations

Checkpoint 5.3 - Core

Images that convey a lot of information have a long description and/or "D" (description) link

WCAG 1.0 Priority 1

WCAG Guideline 1. Provide equivalent alternatives to auditory and visual content.

In some instances images convey so much information that it is not possible to put it in an alt attribute, such as in a map. In these cases, a long description should be provided. This is a text description of the important information in the image.

Long descriptions should be provided on the same page as the complex image, or, if this is not possible, an obvious link should be provided to a page with the long description.

D-links could also be provided for all complex images. Note the convention of square brackets around the letter D. i.e. [D]

Requirement

A long description must be provided for all images which contain a lot of information.

Example

Example 1 - Making an origami crane

The following series of images are too complex to explain in an alt attribute, therefore a long description should be written. Each image still needs an alt attribute however - a good example would be "Making an origami crane". The long description could sit next to the relevant image, or be supplied on another page. In the latter case, a link would need to be provided from the image page to the long description page.

Order Image Long description
1 Making an origami crane 1 Start with a square piece of paper.
2 Making an origami crane 2 Fold the square in half diagonally from corner to corner. You should now have a triangle shape.
3 Making an origami crane 3 Fold the triangle in half again diagonally, from corner to corner. You should now have a smaller triangle shape.

Example 2 - Images with longdesc

<img src="flowchart.gif" alt="Flowchart of the exam marking process" longdesc="flowchar.txt"><a href="flowchart.txt" >[D]</a>

Checking Tool

  • Analyse images and their alt attributes to ensure long descriptions are provided where appropriate.
  • Internet Explorer - AIS Toolbar: Images > Toggle Image > Alt
    This will turn all images off replacing them with the values of the alt attributes.
  • Firefox - Web Developer's Toolbar: Images > Display Alt Attributes

Information Source

The original source of this information is located on the W3C web site  (www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent)

 

Back to top