Element

img

Error Type

Potential

Guidelines

  • BITV 1.0 (Level 2)
    Guideline GroupLevel 1
    Guideline Subgroup2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup.
  • Section 508
    Guideline GroupC - color also available without color
  • Stanca Act
    Guideline GroupRequirement 4: Color Specific
  • Visual Content
    Guideline Group[ _GROUPNAME_90 ]
  • WCAG 1.0 (Level A)
    Guideline GroupPriority 1
    Guideline Subgroup2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup.
  • WCAG 1.0 (Level AA)
    Guideline GroupPriority 1
    Guideline Subgroup2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup.
  • WCAG 1.0 (Level AAA)
    Guideline GroupPriority 1
    Guideline Subgroup2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup.
  • WCAG 2.0 (Level A)
    Guideline Group1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
    Guideline SubgroupSuccess Criteria 1.4.1 Use of Color (A)
  • WCAG 2.0 (Level AA)
    Guideline Group1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
    Guideline SubgroupSuccess Criteria 1.4.1 Use of Color (A)

Requirement

For all img elements, text does not refer to the image by color alone.

Error

Image may be using color alone.

Short Description

This error is generated for all img elements that have a width and height greater than 100.

Rationale

You should not describe an image, or part of an image, using color alone. For example, when referring to a photograph, you should not say "my son is wearing a red coat". Instead say "my son is third from the left wearing a red coat".

How To Determine

Question Are there any references to this image using color alone?
PASS There are no references to this image using color alone.
FAIL There is a reference to this image using color alone.

Steps To Check

Procedure

1. View the text of the document.
2. Check each image in the document.
3. View the alt text for each image.

Expected Result

1. For all img elements, text does not refer to the image by color alone.

Failed Result

1. Change the text so it does not refer to the image by color alone.

Examples

Pass Examples

Image is not referenced within document text by color alone.
<?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>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>ATRC Testfile - Check #14.2 - Negative</title>
</head>
<body>
<h1>Clayton's Class</h1>

<p>This is Clayton's class photo from 2004. Clayton is third from the left wearing a red coat and no boots.</p>

<p><img src="kids.jpg" alt="class photo showing 6 children"/></p>

</body>
</html>

Fail Examples

Image is referenced by color alone.
<?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>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>ATRC Testfile - Check #14.1 - Positive</title>
</head>
<body>
<h1>Clayton's Class</h1>

<p>This is Clayton's class photo from 2004. Clayton is the one wearing a red coat.</p>

<p><img src="kids.jpg" alt="class photo showing 6 children"/></p>

</body>
</html>

English | German | Italiano


Web site engine's code is copyright © 2011
Inclusive Design Institute
Web Service API