HTML graphics contain no text

Rule Type:atomic
Rule Id: 0va7u6
Last modified: Jan 11, 2022
Accessibility Requirements Mapping:
- 1.4.5 Images of Text (Level AA)
  - Learn More about 1.4.5 Images of Text
  - Required for conformance to WCAG 2.0 and later on level AA and higher.
  - Outcome mapping:
    Any failed outcomes: success criterion is not satisfied.
    All passed outcomes: success criterion needs further testing.
    An inapplicable outcome: success criterion needs further testing.
- 1.4.9 Images of Text (No Exception) (Level AAA)
  - Learn More about 1.4.9 Images of Text (No Exception)
  - Required for conformance to WCAG 2.0 and later on level AAA.
  - Outcome mapping:
    Any failed outcomes: success criterion is not satisfied.
    All passed outcomes: success criterion needs further testing.
    An inapplicable outcome: success criterion needs further testing.
Input Aspects:

Description

This rule checks that images of text are not used

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:

essential: the visible pixels of the test target contain text for which its presentation is essential; or
language: the visible pixels of the test target do not contain text expressing anything in a human language; or
significant: the visible pixels of the test target contain text and the text is not a significant part of the visible pixels of the test target; or
decoration: the embedded image the test target belongs to is purely decorative.

Assumptions

There is no mechanism to change the rendered text in the image resource. Otherwise, the rule might fail while SC 1.4.5 Images of Text and SC 1.4.9 Images of Text (No Exception) might be satisfied.
The specific presentation of the text rendered in the image resource can be achieved through formatted text. Otherwise, the rule might fail while SC 1.4.5 Images of Text and SC 1.4.9 Images of Text (No Exception) might be satisfied.

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).

Bibliography

Test Cases

Passed

Passed Example 1

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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>

Glossary

Attribute value

The attribute value of a content attribute set on an HTML element is the value that the attribute gets after being parsed and computed according to specifications. It may differ from the value that is actually written in the HTML code due to trimming whitespace or non-digits characters, default values, or case-insensitivity.

Some notable case of attribute value, among others:

For enumerated attributes, the attribute value is either the state of the attribute, or the keyword that maps to it; even for the default states. Thus <input type="image" /> has an attribute value of either Image Button (the state) or image (the keyword mapping to it), both formulations having the same meaning; similarly, "an input element with a type attribute value of Text" can be either <input type="text" />, <input /> (missing value default), or <input type="invalid" /> (invalid value default).
For boolean attributes, the attribute value is true when the attribute is present and false otherwise. Thus <button disabled>, <button disabled="disabled"> and <button disabled=""> all have a disabled attribute value of true.
For attributes whose value is used in a case-insensitive context, the attribute value is the lowercase version of the value written in the HTML code.
For attributes that accept numbers, the attribute value is the result of parsing the value written in the HTML code according to the rules for parsing this kind of number.
For attributes that accept sets of tokens, whether space separated or comma separated, the attribute value is the set of tokens obtained after parsing the set and, depending on the case, converting its items to lowercase (if the set is used in a case-insensitive context).
For aria-* attributes, the attribute value is computed as indicated in the WAI-ARIA specification and the HTML Accessibility API Mappings.

This list is not exhaustive, and only serves as an illustration for some of the most common cases.

The attribute value of an IDL attribute is the value returned on getting it. Note that when an IDL attribute reflects a content attribute, they have the same attribute value.

Embedded Image

An element presents an embedded image when any of the following is true:

the element is an img element with a non-empty source set; or
the element is an input element with a type attribute value of image and its src attribute value is not empty; or
the element is an object element with a data attribute value referencing a resource with an image MIME type; or
the element is an svg element having one or more image descendants with a non-empty href attribute value; or
the element has a computed background-image CSS property with at least one image that is a url reference.

Outcome

An outcome is a conclusion that comes from evaluating an ACT Rule on a test subject or one of its constituent test target. An outcome can be one of the three following types:

Inapplicable: No part of the test subject matches the applicability
Passed: A test target meets all expectations
Failed: A test target does not meet all expectations

Note: A rule has one passed or failed outcome for every test target. When there are no test targets the rule has one inapplicable outcome. This means that each test subject will have one or more outcomes.

Note: Implementations using the EARL10-Schema can express the outcome with the outcome property. In addition to passed, failed and inapplicable, EARL 1.0 also defined an incomplete outcome. While this cannot be the outcome of an ACT Rule when applied in its entirety, it often happens that rules are only partially evaluated. For example, when applicability was automated, but the expectations have to be evaluated manually. Such "interim" results can be expressed with the incomplete outcome.

Rendered Image Resource

A rendered image resource in a web page is any resource with visible pixels that has been specified in the list of image sources of an embedded image.

Visible

Content perceivable through sight.

Content is considered visible if making it fully transparent would result in a difference in the pixels rendered for any part of the document that is currently within the viewport or can be brought into the viewport via scrolling.

Content is defined in WCAG.

For more details, see examples of visible.

Web page (HTML)

An HTML web page is the set of all fully active documents which share the same top-level browsing context.

Note: Nesting of browsing context mostly happens with iframe and object. Thus a web page will most of the time be a "top-level" document and all its iframe and object (recursively).

Note: Web pages as defined by WCAG are not restricted to the HTML technology but can also include, e.g., PDF or DOCX documents.

Note: Although web pages as defined here are sets of documents (and do not contain other kind of nodes), one can abusively write that any node is "in a web page" if it is a shadow-including descendant of a document that is part of that web page.

Useful Links

Implementations

This section is not part of the official rule. It is populated dynamically and not accounted for in the change history or the last modified date. This section will not be included in the rule when it is published on the W3C website.

Tool	Consistency	Complete	Report
Trusted Tester	consistent	Yes	View Report

Acknowledgments

Authors

Carlos Duarte

Funding

WAI-Tools

Assets

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

Table of Contents

Glossary
Useful Links
Implementations
Acknowledgments