Skip to content

Proposed Test Rule: Content has alternative for visual reference

Applicability

This rule applies to any text node that is either visible or included in the accessibility tree.

Expectation

For each test target, either it contains none of the visual reference words, or it does not identify any web content through the use of any visual reference words, or it does identify some web content and at least one of the following is true:

Assumptions

Accessibility Support

There are no major accessibility support issues known for this rule.

Background

Visual reference words that can be interpreted with the non-sensory meaning include, in English, expressions like “right after this” where “right” is a visual reference word used with the meaning “immediately”; or words like “below” that is often used with the meaning “further in reading order”.

The rule doesn’t require the non-visual characteristic description to be included in the accessibility tree. If the alternatives are not included in the accessibility tree, only Success Criteria 1.3.1 Info and Relationships would fail instead of both Success Criterion 1.3.3 Sensory Characteristics and Success Criteria 1.3.1 Info and Relationships. Hence, the rule passes in these cases as it is not a failure of all accessibility requirements.

The identified web content does not have to be positioned on the same web page and doesn’t need to be linked to from the tested web page.

Bibliography

Accessibility Requirements Mapping

Input Aspects

The following aspects are required in using this rule.

Test Cases

Passed

Passed Example 1

This paragraph includes the visual reference word “right”. The content in the second column is identified with the word “right” but also identified by referencing the word “howdy”, thus matching the non-visual reference condition.

<html lang="en">
	<head>
		<title>Passed example 1 9bd38c</title>
		<link rel="stylesheet" type="text/css" href="/test-assets/non-visual-reference-alternative-9bd38c/columns.css" />
	</head>
	<body>
		<div class="col-container">
			<div class="col">
				<p>Click the button labelled "howdy", on the right, for a surprise</p>
			</div>
			<div class="col">
				<button onclick="alert('Surprise!')">Howdy</button>
			</div>
		</div>
	</body>
</html>

Passed Example 2

This paragraph includes the visual reference word “below” which can here be accurately interpreted as “further in the reading order”. Hence, the paragraph matches the non-sensory meaning condition.

<html lang="en">
	<p>Interact with the button below this paragraph, for a surprise</p>
	<button onclick="alert('Surprise!')">Howdy</button>
</html>

Passed Example 3

This paragraph includes the visual reference word “right”. The visual reference made by the word “right” is complemented by the non-visual reference made by the word “menu” to the content identified by the “Menu” heading, thus matching the non-visual reference condition.

<html lang="en">
	<head>
		<title>Passed example 3 9bd38c</title>
		<link rel="stylesheet" type="text/css" href="/test-assets/non-visual-reference-alternative-9bd38c/columns.css" />
	</head>
	<body>
		<div class="col-container">
			<div class="col">
				<p>Find the menu on the right, to navigate</p>
			</div>
			<div class="col">
				<h1>Menu</h1>
				<ul>
					<li>
						<a href="https://www.w3.org/Consortium/contact">Contact</a>
					</li>
					<li>
						<a href="https://www.w3.org/Help/">Help and FAQ</a>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>

Passed Example 4

This text includes the visual reference word “tilted” and identifies web content (namely itself). But the text also includes the word “this” which makes it apparent that the description is about the same content, thus matching the non-visual reference condition.

<html lang="en">
	<head>
		<title>Passed example 4 9bd38c</title>
		<style>
			div.tilt {
				height: 750px;
				width: 150px;
				-ms-transform: rotate(20deg); /* IE 9 */
				-webkit-transform: rotate(20deg); /* Safari 3-8 */
				transform: rotate(20deg);
			}
		</style>
	</head>
	<body>
		<div class="tilt">Search this pieCe of tiLted text fOr clueS on whEre to find The monster.</div>
	</body>
</html>

Passed Example 5

This paragraph includes the visual reference word “round”. The button is identified by this word which is also included in the visible text content of the element, thus matching the visible words condition.

<html lang="en">
	<head>
		<title>Passed example 5 9bd38c</title>
		<link rel="stylesheet" type="text/css" href="/test-assets/non-visual-reference-alternative-9bd38c/columns.css" />
	</head>
	<body>
		<div class="col-container">
			<div class="col">
				<p>Click the round button, for a surprise</p>
			</div>
			<div class="col">
				<button style="border-radius: 50%; height: 100px; width: 100px;" onclick="alert('Surprise!')">
					Round button
				</button>
			</div>
		</div>
	</body>
</html>

Passed Example 6

This paragraph includes the visual reference word “triangle” which is included in the heading of the menu, thus matching the visible words condition. The fact that the described content is on another page of the same website does not restrict this rule.

<html lang="en">
	<p>
		On the
		<a href="/test-assets/non-visual-reference-alternative-9bd38c/triangle-menu-with-heading.html">information page</a>
		you can find more examples within the triangle menu.
	</p>
</html>

Passed Example 7

This paragraph includes the visual reference words “wide” and “narrow”. The images are indicated by these words which are also included in the accessible names of the images, thus matching the accessible words condition.

<html lang="en">
	<p>The wide image is awesome. The narrow image isn't.</p>
	<img
		scr="/test-assets/non-visual-reference-alternative-9bd38c/awesome_wide.jfif"
		alt="Wide photo of an awesome landscape."
	/>
	<img
		scr="/test-assets/non-visual-reference-alternative-9bd38c/non_awesome_narrow.jpg"
		alt="Narrow photo of a dull landscape."
	/>
</html>

Passed Example 8

This paragraph includes the visual reference words “square” and “right” but in this case they are not identifying any web content.

<html lang="en">
	<p>A square is a regular quadrilateral with four equal sides and four right angles.</p>
</html>

Passed Example 9

This paragraph includes the visual reference word “circle” but in this case it is not an instruction about any web content, thus matching the no instruction condition.

<html lang="en">
	<p>
		This circle is nice.
		<span
			role="presentation"
			style="height: 25px;
		     width: 25px;
		     background-color: #bbb;
		     border-radius: 50%;
		     display: inline-block;"
		>
		</span>
	</p>
</html>

Passed Example 10

This paragraph includes the visual reference word “star” but there is also a heading “examples” that can be referenced, thus matching the non-visual references condition. The fact that the identified content is in an iframe does not restrict this rule.

<html lang="en">
	<p>More examples can be found when you look underneath the star or you can search for the "Examples" heading</p>
	<iframe title="star" src="/test-assets/non-visual-reference-alternative-9bd38c/star-with-heading.html"></iframe>
</html>

Passed Example 11

This paragraph includes the visual reference word “right”. The content in the second column is identified with the word “right” but also identified by referencing the word “howdy”, thus matching the non-visual reference condition. Note that, despite the fact that the text is not visible, this example is applicable because it is included in the accessibility tree.

<html lang="en">
	<head>
		<title>Passed example 11 9bd38c</title>
		<link rel="stylesheet" type="text/css" href="/test-assets/non-visual-reference-alternative-9bd38c/columns.css" />
	</head>
	<body>
		<div class="col-container">
			<div class="col">
				<p style="position:absolute; top:-9999em">Click the button labelled "howdy", on the right, for a surprise</p>
			</div>
			<div class="col">
				<button onclick="alert('Surprise!')">Howdy</button>
			</div>
		</div>
	</body>
</html>

Passed Example 12

This paragraph includes the visual reference word “green”. The content in the second column is identified with the word “green” but also identified by referencing the word “howdy”, thus matching the non-visual reference condition. Note that, despite the fact that the text is not included in the accessibility tree, this example is applicable because it is visible.

<html lang="en">
	<head>
		<title>Passed example 12 9bd38c</title>
		<link rel="stylesheet" type="text/css" href="/test-assets/non-visual-reference-alternative-9bd38c/columns.css" />
	</head>
	<body>
		<div class="col-container">
			<div class="col">
				<p aria-hidden="true">Click the green button labelled "howdy" for a surprise</p>
			</div>
			<div class="col">
				<button style="background-color: green" onclick="alert('Surprise!')">Howdy</button>
			</div>
		</div>
	</body>
</html>

Passed Example 13

This paragraph includes the visual reference word “right”. The user is told to find the navigation on the right and the navigation is also correctly identified by a nav element whose accessible name contains the word “navigation”, thus matching the non-visual reference condition.

<html lang="en">
	<head>
		<title>Passed example 13 9bd38c</title>
		<link rel="stylesheet" type="text/css" href="/test-assets/non-visual-reference-alternative-9bd38c/columns.css" />
	</head>
	<body>
		<div class="col-container">
			<div class="col">
				<p>Find the navigation on the right, for the non-essential links</p>
			</div>
			<nav>
				<div class="col">
					<ul>
						<li>
							<a href="https://www.w3.org/Consortium/contact">Contact</a>
						</li>
						<li>
							<a href="https://www.w3.org/Help/">Help and FAQ</a>
						</li>
					</ul>
				</div>
			</nav>
		</div>
	</body>
</html>

Passed Example 14

No text node on this page includes any of the visual reference words.

<html lang="en">
	<p>Click the button, for a surprise</p>
	<button onclick="alert('Surprise!')">Howdy</button>
</html>

Passed Example 15

No text node on this page includes any of the visual reference words. The word “square” in French (the language of the page) never has the meaning of the geometrical figure. Hence, it is not the translation of any of the visual reference words. The sentence means “After school, he’s taking his kids to the public garden.”

<html lang="fr">
	<p>
		Après l'école, il emmène ses enfants jouer au square.
	</p>
</html>

Failed

Failed Example 1

This paragraph includes the visual reference word “right”. The user is told to find the menu on the right but the menu is not identified in any other way.

<html lang="en">
	<head>
		<title>Failed example 1 9bd38c</title>
		<link rel="stylesheet" type="text/css" href="/test-assets/non-visual-reference-alternative-9bd38c/columns.css" />
	</head>
	<body>
		<div class="col-container">
			<div class="col">
				<p>Find the menu on the right, to navigate</p>
			</div>
			<div class="col">
				<ul>
					<li>
						<a href="https://www.w3.org/Consortium/contact">Contact</a>
					</li>
					<li>
						<a href="https://www.w3.org/Help/">Help and FAQ</a>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>

Failed Example 2

This paragraph includes the visual reference word “right”. The user is told to find the navigation on the right and the navigation is correctly identified by a nav element, but there are 2 nav elements on the page so the user doesn’t know which one to use (the non-visual reference is ambiguous and does not identify a specific web content).

<html lang="en">
	<head>
		<title>Failed example 2 9bd38c</title>
		<link rel="stylesheet" type="text/css" href="/test-assets/non-visual-reference-alternative-9bd38c/columns.css" />
	</head>
	<body>
		<nav>
			<ul>
				<li>
					<a href="https://www.w3.org/">W3C homepage</a>
				</li>
				<li>
					<a href="https://www.w3.org/standards/">Standards</a>
				</li>
			</ul>
		</nav>
		<div class="col-container">
			<div class="col">
				<p>Find the navigation on the right, for the non-essential links</p>
			</div>
			<nav>
				<div class="col">
					<ul>
						<li>
							<a href="https://www.w3.org/Consortium/contact">Contact</a>
						</li>
						<li>
							<a href="https://www.w3.org/Help/">Help and FAQ</a>
						</li>
					</ul>
				</div>
			</nav>
		</div>
	</body>
</html>

Failed Example 3

This paragraph includes the visual reference word “triangle” (which is not included in the identified content) and no other indication is present so the rule fails. The fact that the triangle menu is on a different page of the same website does not restrict the rule.

<html lang="en">
	<body>
		<p>
			On the
			<a href="/test-assets/non-visual-reference-alternative-9bd38c/triangle-menu-without-heading.html"
				>information page</a
			>
			you can find more examples within the triangle menu
		</p>
	</body>
</html>

Failed Example 4

This paragraph includes the visual reference word “star” (which is not included in the identified content) and there is no other indication. The content described is in an iframe.

<html lang="en">
	<body>
		<p>More examples can be found when you look underneath the star</p>
		<iframe src="/test-assets/non-visual-reference-alternative-9bd38c/star-without-heading.html"></iframe>
	</body>
</html>

Inapplicable

Inapplicable Example 1

This image link contains no text node.

<html lang="en">
	<a href="https://act-rules.github.io/"><img src="test-assets/shared/act-logo.png" alt="ACT rules"/></a>
</html>

Inapplicable Example 2

This document contains no text node that is either visible or included in the accessibility tree.

<html lang="en">
	<div style="display:none">
		<p>Click the box, for a surprise</p>
		<button onclick="alert('Surprise!')">Howdy</button>
	</div>
</html>

Glossary

Accessible Name

The accessible name is the programmatically determined name of a user interface element that is included in the accessibility tree.

The accessible name is calculated using the accessible name and description computation.

For native markup languages, such as HTML and SVG, additional information on how to calculate the accessible name can be found in HTML Accessibility API Mappings 1.0, Accessible Name and Description Computation (working draft) and SVG Accessibility API Mappings, Name and Description (working draft).

For more details, see examples of accessible name.

Note: As per the accessible name and description computation, each element always has an accessible name. When no accessible name is provided, the element will nonetheless be assigned an empty ("") one.

Note: As per the accessible name and description computation, accessible names are flat string trimmed of leading and trailing whitespace. Notably, it is not possible for a non-empty accessible name to be composed only of whitespace since these must be trimmed.

Focusable

Elements that can become the target of keyboard input as described in the HTML specification of focusable and can be focused.

Included in the accessibility tree

Elements included in the accessibility tree of platform specific accessibility APIs are exposed to assistive technologies. This allows users of assistive technology to access the elements in a way that meets the requirements of the individual user.

The general rules for when elements are included in the accessibility tree are defined in the core accessibility API mappings. For native markup languages, such as HTML and SVG, additional rules for when elements are included in the accessibility tree can be found in the HTML accessibility API mappings (working draft) and the SVG accessibility API mappings (working draft).

For more details, see examples of included in the accessibility tree.

Programmatically hidden elements are removed from the accessibility tree. However, some browsers will leave focusable elements with an aria-hidden attribute set to true in the accessibility tree. Because they are hidden, these elements are considered not included in the accessibility tree. This may cause confusion for users of assistive technologies because they may still be able to interact with these focusable elements using sequential keyboard navigation, even though the element should not be included in the accessibility tree.

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:

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.

Programmatically Hidden

An HTML element is programmatically hidden if either it has a computed CSS property visibility whose value is not visible; or at least one of the following is true for any of its inclusive ancestors in the flat tree:

Note: Contrarily to the other conditions, the visibility CSS property may be reverted by descendants.

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.

Visible Text Content

The visible text content of an element is a set of all visible text nodes that are descendants in the flat tree of this element

Visual Reference Words

Any word in a text node that is included in the translated version of the following lists, where the language of the translation is the programmatically determinable language of the text node. Some words can be translated in multiple ways or have plural forms. In such cases each translation or form must be included. Some words can be spelled in multiple ways (For example: sometimes the word is capitalized and sometimes it isn’t). In such cases each spelling must be included.

Note: This list is not exhaustive. As soon as more visual reference words are found they can be added to this list.

Visual location:

Shape:

Size:

Orientation:

Color

Implementations

There are currently no known implementations for this rule. If you would like to contribute an implementation, please read the ACT Implementations page for details.

Changelog

This is the first version of this ACT rule.

Back to Top