Skip to content

Latest commit

 

History

History
234 lines (175 loc) · 8.13 KB

image-no-text-0va7u6.md

File metadata and controls

234 lines (175 loc) · 8.13 KB
id name rule_type description accessibility_requirements input_aspects acknowledgments
0va7u6
HTML graphics contain no text
atomic
This rule checks that images of text are not used
wcag20:1.4.5 wcag20:1.4.9
forConformance failed passed inapplicable
true
not satisfied
further testing needed
further testing needed
forConformance failed passed inapplicable
true
not satisfied
further testing needed
further testing needed
DOM Tree
CSS Styling
Language
authors images
Carlos Duarte
Times Square image released into the public domain by (WT-shared) Ypsilonatshared at wts wikivoyage.
Book shelf image by Alexandre Boue, licensed under the [Creative Commons Attribution-ShareAlike 4.0 International](https://creativecommons.org/licenses/by-sa/4.0/deed.en) license.
Ivanhoe Classic Comics released into the public domain by Malcolm Kildale under the [Creative Commons Attribution-ShareAlike 3.0 Unported](https://creativecommons.org/licenses/by-sa/3.0/deed.en) license

Applicability

This rule applies to any rendered image resources in a web page.

Expectation

For each test target, at least one of the following is true:

Assumptions

Accessibility Support

No accessibility support issues known.

Background

This rule is designed specifically for SC 1.4.5 Images of Text which includes exceptions to the images it applies to that are not part of SC 1.4.9 Images of Text (No Exception). Therefore, some images that are inapplicable for this rule can be applicable to SC 1.4.9 Images of Text (No Exception).

Test Cases

Passed

Passed Example 1

This image resource referenced by the img element does not contain text.

<img src="/test-assets/shared/fireworks.jpg" alt="fireworks going off behind the Eiffel tower at night" />

Passed Example 2

This image resource referenced by the input element does not contain text.

<input type="image" src="/test-assets/shared/file.svg" alt="New file" />

Passed Example 3

This image resource referenced by the svg element does not contain text.

<svg width="2in" height="3in" xmlns="http://www.w3.org/2000/svg">
	<image x="20" y="20" width="200px" height="100px" href="/test-assets/shared/fireworks.jpg">
		<title>Fireworks in Paris</title>
	</image>
</svg>

Passed Example 4

This image resource referenced by the object element contains text, but it is not the most significant content.

<object data="/test-assets/0va7u6/times_square.jpg" title="Picture of Times Square, New York"></object>

Passed Example 5

This image resource referenced by the img element contains text, but its presentation is essential to convey the information.

<p>
	The following image is a close up of the cover of a Classic Comics book titled "Ivanhoe" illustrating a font that
	looks like an old Gothic style font.
</p>
<img
	src="/test-assets/0va7u6/ivanhoe.png"
	alt="The word Ivanhoe written in a style that resembles old medieval letters. The letter I is colored to resemble copper. The remaining letters are black. The background is yellow."
/>

Passed Example 6

This image resource referenced by the background-image property of the div element contains a logo with text. Logotypes are considered an essential exception.

<div
	role="img"
	aria-label="W3C logo"
	style="
    width: 100px;
    height: 100px;
    background-image: url(/test-assets/shared/w3c-logo.png);
    background-repeat: no-repeat;
  "
></div>

Passed Example 7

This image resource referenced by the img element is an image of text (the book covers), but it is just meant to decorate the webpage of a book store, therefore it is purely decorative.

<img src="/test-assets/0va7u6/books.jpg" alt="" />
<p>Welcome to my book store</p>

Passed Example 8

These image resources referenced by the input elements are images of text (the letter "A"), but they are not expressing anything in a human language. The image is only used to indicate how the font size can be controlled.

<input
	type="image"
	src="/test-assets/0va7u6/smallA.png"
	style="border: 1px solid black;"
	width="50px"
	height="50px"
	alt="Decrease text size"
/>
<input
	type="image"
	src="/test-assets/0va7u6/bigA.png"
	style="border: 1px solid black;"
	width="50px"
	height="50px"
	alt="Increase text size"
/>

Failed

Failed Example 1

This image resource referenced by the img element contains text for which the particular presentation is not essential.

<img
	src="/test-assets/0va7u6/textimage.jpg"
	alt="The Accessibility Conformance Testing (ACT) Rules Format 1.0 defines a format for writing accessibility test rules."
/>

Failed Example 2

This image resource referenced by the input element in the Image Button contains text for which the particular presentation is not essential.

<input type="image" src="/test-assets/0va7u6/button.jpg" alt="Press me" />

Failed Example 3

This image resource referenced by the background-image property of the div element contains text for which the particular presentation is not essential.

<div style="background-image: url(/test-assets/0va7u6/textimage.jpg); width: 500px; height: 200px;" />

Failed Example 4

This image resource referenced by the img element contains text that provides redundant information, but it still is information, therefore it is not purely decorative.

<img src="/test-assets/0va7u6/welcome.png" alt="" />
<p>Welcome to our website</p>

Inapplicable

Inapplicable Example 1

The resource referenced by the object element does not have visible pixels.

<object date="/test-assets/0va7u6/textimage.jpg" style="display: none"></object>

Inapplicable Example 2

This svg element does not have image element descendants.

<svg xmlns="http://www.w3.org/2000/svg">
	<text x="20" y="35">My</text>
	<text x="45" y="35">cat</text>
	<text x="55" y="55">is</text>
	<text x="70" y="55">Grumpy!</text>
</svg>