Web Accessibility Checker : Check Details

Element

img

Error Type

Potential

Guidelines

BITV 1.0 (Level 2)
Level 1
2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup.
Section 508
C - color also available without color
Stanca Act
Requirement 4: Color Specific
WCAG 1.0 (Level A)
Priority 1
2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup.
WCAG 1.0 (Level AA)
Priority 1
2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup.
WCAG 1.0 (Level AAA)
Priority 1
2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup.
WCAG 2.0 (Level A)
1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
Success Criteria 1.4.1 Use of Color (A)
WCAG 2.0 (Level AA)
1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
Success 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>