Skip to content

image-no-text-0va7u6.md

Latest commit

 

History

History
254 lines (190 loc) · 9.51 KB

image-no-text-0va7u6.md

File metadata and controls

254 lines (190 loc) · 9.51 KB
id 0va7u6
name HTML images contain no text
rules_format 1.1
rule_type atomic
description This rule checks that images of text are not used
accessibility_requirements
wcag20:1.4.5 wcag20:1.4.9
forConformance failed passed inapplicable
true
not satisfied
further testing needed
further testing needed
secondary
This success criterion is **more strict** than this rule. This is because the rule considers redundancy when information presented as an image of text is also conveyed in text. Some of the passed examples do not satisfy this success criterion.
input_aspects
DOM Tree
CSS Styling
Language
acknowledgments
authors funding assets
Carlos Duarte
Wilco Fiers
WAI-Tools
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 image resources rendered in a web page.

Expectation

Each test target has no visible text, except if at least one of the following is true:

  • decorative: The image with text is purely decorative; or
  • incidental: The text is not a significant part of the image; or
  • essential: The presentation of the text is essential; or
  • redundant: The same information conveyed by the image of text is also available as real text.

Background

This rule is designed specifically for SC 1.4.5 Images of Text. There are however only minimal differences between this criterion and SC 1.4.9 Images of Text (No Exception). The two differences are that customizable images of text are allowed, and that images of text are allowed when the presentation cannot otherwise be achieved. These scenarios are so rare the rule ignores them as part of the assumptions, and so the accessibility requirements mapping of these two criteria is the same.

Understanding SC 1.4.5 Images of Text explicitly clarifies in its note that the success criterion is meant to address cases where images of text are used instead of actual text. If images of text are used in addition to real text to convey the same information, then the success criterion is satisfied.

Assumptions

  • This rule assumes that there is no mechanism to change the rendering of text within image resources on the page. For pages that do provide such a mechanism, this rule might fail even if SC 1.4.5 Images of Text is satisfied.
  • When used in HTML, the SVG <text> element is not considered to be an image of text. This is because like any other element in HTML, SVG <text> can be adjusted through custom style sheets. This does not apply for SVG text that is in a separate file, and displayed through, for example, the img element.

Accessibility Support

There are no accessibility support issues known.

Other Resources

Examples

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 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"
/>

Passed Example 9

This image resource referenced by the img element contains text that provides redundant information. In fact, the same information conveyed by the image of text is also available as real text.

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

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 img element loads an SVG with text as an image resource. Because the SVG is loaded as an image resource, instead of being embedded in HTML the text cannot be selected or customized.

<img
	alt="WCAG Rocks"
	src="data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' height='20px' width='80px'>
  <text x='0' y='15'>WCAG Rocks</text>
</svg>"
/>

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>