Content has alternative for visual reference

  • Rule Type:atomic
  • Rule Id: 9bd38c
  • Last modified: May 10, 2021
  • Accessibility Requirements Mapping:
    • 1.3.1 Info and Relationships (Level A)
      • Learn More about 1.3.1 Info and Relationships
      • 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.
    • 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 to 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.

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:

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.

Test Cases

Passed

Passed Example 1

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.

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

Accessibility Support for Accessible Name

  • Because the accessible name and description computation is not clear about which whitespace are considered, browsers behave differently when trimming and flattening the accessible name. For example, some browsers completely trim non-breaking spaces while some keep them in the accessible name.
  • There exists a popular browser which does not perform the same trimming and flattening depending whether the accessible name comes from content, an aria-label attribute, or an alt attribute.
  • There exists a popular browser which assign no accessible name (null) when none is provided, instead of assigned an empty accessible name ("").
  • The accessible name and description computation suggest that if an aria-labelledby attribute refers to an existing but empty element, the computation should stop and return an empty name without defaulting to the next steps. Several user agents and assistive technologies chose to use the next step in the computation in this case.

Included in the accessibility tree

Elements included in the accessibility tree of platform specific accessibility APIs. Elements in the accessibility tree are exposed to assistive technologies, allowing users to interact with the elements in a way that meet 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.

Note: Users of assistive technologies might still be able to interact with elements that are not included in the accessibility tree. An example of this is a focusable element with an aria-hidden attribute with a value of true. Such an element could still be interacted using sequential keyboard navigation regardless of the assistive technologies used, even though the element would 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.

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.

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

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.

No Implementations

Implementation reports are not provided for this rule.

Acknowledgments

Table of Contents