Element

img

Error Type

Potential

Guidelines

  • BITV 1.0 (Level 2)
    Guideline GroupLevel 1
    Guideline Subgroup1.1 Provide a text equivalent for every non-text element.
  • WCAG 1.0 (Level A)
    Guideline GroupPriority 1
    Guideline Subgroup1.1 Provide a text equivalent for every non-text element.
  • WCAG 1.0 (Level AA)
    Guideline GroupPriority 1
    Guideline Subgroup1.1 Provide a text equivalent for every non-text element.
  • WCAG 1.0 (Level AAA)
    Guideline GroupPriority 1
    Guideline Subgroup1.1 Provide a text equivalent for every non-text element.
  • WCAG 2.0 (Level A)
    Guideline Group1.1 Text Altrernatives: Provide text alternatives for any non-text content
    Guideline SubgroupSuccess Criteria 1.1.1 Non-text Content (A)
  • WCAG 2.0 (Level AA)
    Guideline Group1.1 Text Alternatives: Provide text alternatives for any non-text content
    Guideline SubgroupSuccess Criteria 1.1.1 Non-text Content (A)
  • WCAG 2.0 (Level AAA)
    Guideline Group1.1 Text Alternatives: Provide text alternatives for all non-text content
    Guideline SubgroupSuccess Criteria 1.1.1 Non-text Content (A)

Requirement

A long description is used for each img element that does not have Alt text conveying the same information as the image.

Error

img element may require a long description.

Short Description

img element must contain a longdesc attribute.

Rationale

Complex images require a long description if the image is not described within the document. If the image does require a long description, then create the description file and link to it using the longdesc attribute.

How To Determine

Question Does this image require a long description and if so is the long description properly marked?
PASS Image does not require a long description or a long description is provided.
FAIL Image requires a long description and is not properly marked.

Steps To Check

Procedure

1. For each img element, view the associated image and Alt text.
2. Determine if a longer description than the Alt text is required for the image.
3. If a longer description is required, check if it is provided by one of the 3 following methods.
4. Method 1 - Check if there is a longdesc attribute for the img element and the longdesc target text fully describes the image.
5. Method 2 - Check if the body text fully describes the image. (Note: the Alt text for the image must refer to the position in the document of the text that fully describes the image.)
6. Method 3 - Check if there is a link immediately following the image that goes to an accessible text file that fully describes the image.

Expected Result

1. A long description is used for each img element that does not have Alt text conveying the same information as the image.

Failed Result

1. Add a long description for any image that is not fully described by the Alt text.

Examples

Pass Examples

Image is not fully described in Alt text but image has a longdesc attribute.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>OAC Testfile - Check #8.2 - Negative</title>
</head>
<body>
<p>The text in this document does not fully describe the image shown here but the image contains a longdesc attribute linking to a text file that does describe the image. <img src="chart.gif" alt="a complex chart" longdesc="chart.html"/></p>
</body>
</html>

Fail Examples

Image is not fully described in Alt text and a long description is not provided.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>OAC Testfile - Check #8.1 - Positive</title>
</head>
<body>
<p>The text in this document does not fully describe the complex image shown here.
<img src="chart.gif" alt="a complex chart" /></p>
</body>
</html>
Web site engine's code is copyright © 2023
Inclusive Design Institute