Proposed Content has alternative for visual reference

Description

This rule checks that when content is identified through a visual reference, there are also non-visual references identifying the same content.

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:

non-visual reference: the test target is on the same web page as a textual instruction that also identifies that web content without any visual reference word; or
non-sensory meaning: at least one of the visual reference words that identifies the web content is used with a non-sensory meaning; or
visible words: each visual reference word in the test target is included in the visible text content of the identified content; or
accessible words: each visual reference word in the test target is included in the accessible name of the identified content; or
no instruction: the test target does not give instructions about it through the use of any of the visual reference words.

Assumptions

This rule assumes that visual reference words are forms of information conveyed through visual presentation. Therefore, failing this rule fails Success Criterion 1.3.3 Sensory Characteristics. Visual presentation is not limited to CSS and includes images such as the image of a circle with text.

Accessibility Support

There are no accessibility support issues known.

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 Success Criterion 1.3.3 Sensory Characteristics. Hence, the rule passes in these cases as it is not a failure of the accessibility requirements of this rule.

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

1.3.3 Sensory Characteristics (Level A)
- Learn more about 1.3.3 Sensory Characteristics
- Required for conformance to WCAG 2.0 and later on level A 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
G96: Providing textual identification of items that otherwise rely only on sensory information to be understood
- Learn more about technique G96
- Not required for conformance to any W3C accessibility recommendation.
- Outcome mapping:
  - Any failed outcomes: technique is not satisfied
  - All passed outcomes: technique needs further testing
  - An inapplicable outcome: technique needs further testing

Input Aspects

The following aspects are required in using this rule.

Test Cases

These HTML and CSS files are used in several examples:

File /test-assets/non-visual-reference-alternative-9bd38c/triangle-menu-with-heading.html:

<html>
	<body>
		<div>
			<h1>Triangle 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>
				<li>
					<a href="https://www.w3.org/Consortium/sponsor/">Donate</a>
				</li>
				<li>
					<a href="https://www.w3.org/Consortium/siteindex">Sitemap</a>
				</li>
			</ul>
		</div>
	</body>
</html>

File /test-assets/non-visual-reference-alternative-9bd38c/star-with-heading.html:

<html>
	<body>
		<p>★</p>
		<h1>Examples</h1>
		<ul>
			<li>Example 1</li>
			<li>Example 2</li>
			<li>Example 3</li>
			<li>Example 4</li>
		</ul>
	</body>
</html>

File /test-assets/non-visual-reference-alternative-9bd38c/triangle-menu-without-heading.html:

<html>
	<body>
		<div>
			<h1>▲</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>
				<li>
					<a href="https://www.w3.org/Consortium/sponsor/">Donate</a>
				</li>
				<li>
					<a href="https://www.w3.org/Consortium/siteindex">Sitemap</a>
				</li>
			</ul>
		</div>
	</body>
</html>

File /test-assets/non-visual-reference-alternative-9bd38c/star-without-heading.html:

<html>
	<body>
		<p>★</p>
		<ul>
			<li>Example 1</li>
			<li>Example 2</li>
			<li>Example 3</li>
			<li>Example 4</li>
		</ul>
	</body>
</html>

File /test-assets/non-visual-reference-alternative-9bd38c/columns.css:

.col-container {
	display: table;
	width: 100%;
}
.col {
	display: table-cell;
	padding: 16px;
}

Passed

Passed Example 1

Open in a new tab

<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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

An element is focusable if one or both of the following are true:

the element is part of sequential focus navigation; or
the element has a tabindex value that is not null.

Exception: Elements that lose focus during a period of up to 1 second after gaining focus, without the user interacting with the page the element is on, are not considered focusable.

Notes:

The 1 second time span is an arbitrary limit which is not included in WCAG. Given that scripts can manage the focus state of elements, testing the focusability of an element consistently would be impractical without a time limit.
The tabindex value of an element is the value of the tabindex attribute parsed using the rules for parsing integers. For the tabindex value to be different from null, it needs to be parsed without errors.

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:

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.

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:

has a computed CSS property display of none; or
has an aria-hidden attribute set to true

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

Note: The HTML standard suggests setting the CSS display property to none for elements with the hidden attribute. While not required by HTML, all modern browsers follow this suggestion. Because of this the hidden attribute is not used in this definition. In browsers that use this suggestion, overriding the CSS display property can reveal elements with the hidden attribute.

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:

Above
Below
Beneath
Beside
Bottom
Diagonal
Down
Left
Near
Nearby
Parallel
Right
Top
Under
Underneath
Up

Shape:

Box
Circle
Circular
Crescent
Cross
Diamond
Disc
Ellipse
Heart
Hexagon
Hexagonal
Kite
Oval
Parallelogram
Pentagon
Pentagonal
Polygon
Polygonal
Rectangle
Rectangular
Round
Square
Squared
Star
Trapezoid
Trapezoidal
Triangle
Triangular
Wave

Size:

Big
Large
Little
Narrow
Small
Tiny
Wide

Orientation:

Angled
Askew
Atilt
Crooked
Listing
Lopsided
off-kilter
Pitched
Rotated
Sideways
Skewed
Slanted
Slanting
Straight
Tilt
Tilted
Tipped

Color

Any single word color name in the X11 standard, omitting duplicates:
- Almond
- Aqua
- Aquamarine
- Azure
- Beige
- Bisque
- Black
- Blue
- Brown
- Burlywood
- Chartreuse
- Chiffon
- Chocolate
- Coral
- Cornsilk
- Cream
- Crimson
- Cyan
- Firebrick
- Fuchsia
- Gold
- Goldenrod
- Gray
- Green
- Honeydew
- Indigo
- Ivory
- Khaki
- Lace
- Lavender
- Lemon
- Lime
- Linen
- Magenta
- Maroon
- Mint
- Moccasin
- Olive
- Orange
- Orchid
- Pink
- Purple
- Red
- Rose
- Salmon
- Turquoise
- Violet
- White
- Yellow

Rule Versions

This is the first version of this ACT rule.

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.

Description

Applicability

Expectation

Assumptions

Accessibility Support

Background

Bibliography

Accessibility Requirements Mapping

Input Aspects

Test Cases

Passed

Passed Example 1

Passed Example 2

Passed Example 3

Passed Example 4

Passed Example 5

Passed Example 6

Passed Example 7

Passed Example 8

Passed Example 9

Passed Example 10

Passed Example 11

Passed Example 12

Passed Example 13

Passed Example 14

Passed Example 15

Failed

Failed Example 1

Failed Example 2

Failed Example 3

Failed Example 4

Inapplicable

Inapplicable Example 1

Inapplicable Example 2

Glossary

Accessible Name

Focusable

Included in the accessibility tree

Outcome

Programmatically Hidden

Visible

Visible Text Content

Visual Reference Words

Rule Versions

Implementations

Useful Links