Skip to content

Proposed Visible label is part of accessible name

Description

This rule checks that interactive elements labeled through content have their visible label as part of their accessible name.

Applicability

This rule applies to any element for which all the following is true:

Expectation

For the target element, the visible inner text is contained within the accessible name according to the label in name algorithm.

Background

This rule applies to elements with a [widget role][] that support name from content. This includes the following: button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch, tab, treeitem.

The understanding document of 2.5.3 Label in Name use the term “symbolic text characters” to refer to a type of non-text content that uses text characters as symbols, such as using “x” to mean “close”. This rule considers them as “characters expressing non-text content”. Unicode emojis are another example of characters expressing non-text content, although these are not “symbolic text characters”.

Assumptions

This rule assumes that the visible inner text is equal to the [label][https://www.w3.org/wai/wcag21/understanding/label-in-name#dfn-label], even though “label” is not precisely defined at this point in history.

This rule assumes that the visible label isn’t rearranged with CSS so that it appears to the user in a different order than it appears in the DOM.

This rule assumes that the visible label doesn’t use CSS to add whitespace where none exists in the DOM.

This rule assumes that for any word which appears in both the accessible name and the visible label, the same spelling and hyphenation is used in both places. For example: if “non-negative” is used in the accessible name and “nonnegative” is used in the visible label, that would violate this assumption. Similarly, if “color” is used in the accessible name and “colour” is used in the visible label, that would also violate this assumption.

This rule - specifically, the label in name algorithm that this rule relies on - assumes that the algorithm’s treatment of parentheses is appropriate in the given human language. “Parentheses” are also known as “round brackets”. The algorithm’s treatment of parentheses is to remove them and all characters within them. This assumption can be reworded as: content within parentheses can be ignored. This assumption is almost always true in English. It is known to be often false in other languages, such as German (where parentheses indicate dual states) and Arabic (where parentheses are often used as quotation marks). Violations of this assumption will, in real-world scenarios, more often result in a false negative for this rule rather than a false positive.

This rule assumes that all resources needed for rendering the page are properly loaded. Checking if resources are missing is out of the scope of rules. Missing resources may be rendered as text (for example, missing img are rendered as their alt attribute).

Accessibility Support

Implementation of Presentational Roles Conflict Resolution varies from one browser or assistive technology to another. Depending on this, some elements can have one of the applicable semantic roles and fail this rule with some technology but users of other technologies would not experience any accessibility issue.

Bibliography

Accessibility Requirements Mapping

Input Aspects

The following aspects are required in using this rule.

Test Cases

Passed

Passed Example 1

Open in a new tab

This link has visible inner text that is equal to the accessible name.

<a href="https://act-rules.github.io/" aria-label="ACT rules">ACT rules</a>

Passed Example 2

Open in a new tab

This link has visible inner text that, ignoring whitespace, is equal to the accessible name.

<a href="https://act-rules.github.io/" aria-label="  ACT   rules  ">ACT rules</a>

Passed Example 3

Open in a new tab

This link has visible inner text that, ignoring case, is equal to the accessible name.

<a href="https://act-rules.github.io/" aria-label="act Rules">ACT rules</a>

Passed Example 4

Open in a new tab

This button has visible inner text that is contained within the accessible name according to the label in name algorithm.

<button aria-label="Next Page in the list">Next Page</button>

Passed Example 5

Open in a new tab

This button has visible inner text that does not need to be contained within the accessible name, because the “x” text node is non-text content. Note: this would need to meet SC 1.1.1 Non text content.

<button aria-label="anything">X</button>

Passed Example 6

Open in a new tab

This button element has the text “search” rendered as an magnifying glass icon by the font. Because the text is rendered as non-text content, the text does not need to be contained within the accessible name.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<style>
	button {
		font-family: 'Material Icons';
	}
</style>
<button aria-label="Find">search</button>

Passed Example 7

Open in a new tab

This button has visible inner text that, according to the label in name algorithm, is contained within the accessible name. This example shows why the label in name algorithm uses the visible inner text and not the visible text content: the <p> tags insert whitespace into the result in the former but not the latter.

<button aria-label="Hello world">
	<p>Hello</p>
	<p>world</p>
</button>

Passed Example 8

Open in a new tab

Similar to the previous example.

<a href="#" aria-label="Some article by John Doe"
	><h6>Some article</h6>
	<p>by John Doe</p></a
>

Passed Example 9

Open in a new tab

The visible inner text of this link is “ACT” (with no spaces) because of the explicit styles of display: inline on the p elements and the absence of whitespace between the p elements. The cases of display: inline and display: block are handled by the definition of visible inner text of an element. This example shows that the definition agrees with the visual rendering done by the browser.

<a href="#" aria-label="ACT">
	<p style="display: inline">A</p>
	<p style="display: inline">C</p>
	<p style="display: inline">T</p>
</a>

Passed Example 10

Open in a new tab

The visible inner text is “Download specification”. The words “the” and “gizmo” aren’t part of it.

<a aria-label="Download specification" href="#"
	>Download <span style="visibility: hidden">the</span> <span style="display: none">gizmo</span> specification</a
>

Passed Example 11

Open in a new tab

The visible inner text is “Download specification”, which includes a space character between the two words due to the second clause of the definition of visible inner text of a text node.

<a aria-label="Download specification" href="#"
	><span>Download</span><span id="space"> </span><span>specification</span></a
>

Passed Example 12

Open in a new tab

This example shows that the visible inner text isn’t always the same as the [innerText][https://html.spec.whatwg.org/multipage/dom.html#the-innertext-idl-attribute]. The visible inner text is “Download specification”. The innerText is ‘Download \ngizmo\nspecification’. This rule uses the visible inner text - not innerText.

<style>
	.visually-hidden {
		/* Source: https://www.tpgi.com/the-anatomy-of-visually-hidden/ */
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
</style>
<a aria-label="Download specification" href="#">Download <span class="visually-hidden">gizmo</span> specification</a>

Passed Example 13

Open in a new tab

This example shows that the label in name algorithm handles many kinds of whitespace.

<a aria-label="compose email" href="#"
	>compose &nbsp;&nbsp;<br />
	email</a
>

Passed Example 14

Open in a new tab

This example passes the rule because “YYYY-MM-DD” is in brackets. Text in brackets is removed by the label in name algorithm, because its not normally spoken by speech-input users.

<button aria-label="Search by date">Search by date (YYYY-MM-DD)</button>

Passed Example 15

Open in a new tab

This passes for two reasons: 1) because the ellipsis (“…”) is non-text content, and 2) because the ellipsis is neither a letter nor a digit and so is filtered out by the label in name algorithm.

<button aria-label="Next">Next…</button>

Passed Example 16

Open in a new tab

This passes because the label in name algorithm effectively ignores all punctuation and emoji, in both the visible inner text and the accessible name, as long as they don’t break up words.

<button aria-label="💡 Submit 💡">&gt;&gt;&gt; ** Submit ** &lt;&lt;&lt;</button>

Failed

Failed Example 1

Open in a new tab

This link has visible inner text that is very different from the accessible name.

<a href="https://act-rules.github.io/" aria-label="WCAG">ACT rules</a>

Failed Example 2

Open in a new tab

This button has visible inner text that is only partially contained within the accessible name.

<button aria-label="the full">The full label</button>

Failed Example 3

Open in a new tab

This button has visible inner text that is fully contained within the accessible name when viewed as a character-by-character substring. But that does not satisfy our label in name algorithm, which works on full words. So this fails the rule.

<a href="#" aria-label="Discover Italy">Discover It</a>

Failed Example 4

Open in a new tab

This link’s accessible name contains two tokens (according to thelabel in name algorithm) and the visible inner text contains one token. So it fails the rule.

<a aria-label="just ice" href="#">justice</a>

Failed Example 5

Open in a new tab

This link has an accessible name which contains a hyphen. The label in name algorithm breaks up words on hyphens. So it turns “non-standard” into two tokens: “non” and “standard”. So this fails the rule.

<a href="#" aria-label="non-standard">nonstandard</a>

Failed Example 6

Open in a new tab

The rule has no special handling for acronyms or initialisms.

<a aria-label="WCAG" href="#">W C A G</a>

Failed Example 7

Open in a new tab

The rule has no special handling for abbreviations.

<a aria-label="University Avenue" href="#">University Ave.</a>

Failed Example 8

Open in a new tab

This link has visible inner text with mathematical symbols and is not contained within the accessible name because the mathematical symbols are represented as English words (not digits) in the accessible name. This is explicitly mentioned in WCAG.

<a href="/" aria-label="Proof of two multiplied by two is four">Proof of 2&times;2=4</a>

Failed Example 9

Open in a new tab

Similar to the previous example. This rule has no special handling for converting mathematical symbols into words, or vice versa.

<button aria-label="11 times 3 equals 33">11×3=33</button>

Failed Example 10

Open in a new tab

This button’s accessible name contains the same tokens that are in the visible label. But they aren’t in the same order, so it fails the sublist check part of the label in name algorithm, and so it fails the rule.

<button aria-label="how are you"><span>you</span><span>how</span><span>are</span></button>

Failed Example 11

Open in a new tab

This button’s accessible name contains the word “the” in the middle of it, which causes the sublist check of the label in name algorithm (in particular: the “consecutive” requirement of that check) to fail. So it fails the rule.

<button aria-label="Download the specification">Download specification</button>

Failed Example 12

Open in a new tab

This link’s accessible name contains the same digits that are in the visible label, and in the same order. But they have different spaces and punctuation between them, so they are considered separate tokens. So this fails the rule.

<a aria-label="1 2 3. 4 5 6. 7 8 9 0" href="tel:1234567890">123.456.7890</a>

Failed Example 13

Open in a new tab

This rule has no special handling which tries to guess when number have the same semantic meaning. It operates on tokens only.

<a href="#2021" aria-label="20 21">2021</a>

Failed Example 14

Open in a new tab

Similar to the previous example.

<a aria-label="fibonacci: 0 1 1 2 3 5 8 13 21 34">fibonacci: 0112358132134</a>

Failed Example 15

Open in a new tab

This rule has no special handling for converting digits into words, or vice versa.

<a href="#2021" aria-label="twenty twenty-one">two thousand twenty-one</a>

Failed Example 16

Open in a new tab

(Same as above.) This rule has no special handling for converting digits into words, or vice versa.

<a aria-label="two zero two three" href="#">2 0 2 3</a>

Failed Example 17

Open in a new tab

This rule has no special handling for digits that appear next to letters with no spaces in between.

<a aria-label="1a" href="#">1</a>

Failed Example 18

Open in a new tab

The definition of visible inner text doesn’t treat text any differently if it’s excluded from the accessibility tree with aria-hidden. So this rule effectively ignores aria-hidden. So this element fails the rule.

<a aria-label="Download specification" href="#">Download <span aria-hidden="true">gizmo</span> specification</a>

Inapplicable

Inapplicable Example 1

Open in a new tab

This nav is not a widget, so the visible inner text does not need to match the accessible name.

<nav aria-label="main nav">W3C navigation</nav>

Inapplicable Example 2

Open in a new tab

This email text field does not need to have its visible inner text match the accessible name. The content of a textfield shows its value instead of its label; it does not support name from content. The label is usually adjacent to the textfield instead.

<div>E-mail</div>
<input type="email" aria-label="E-mail" value="Contact" />

Inapplicable Example 3

Open in a new tab

This div element does not have a widget role, so the visible inner text does not need to match the accessible name.

<div role="tooltip" aria-label="OK">Next</div>

Inapplicable Example 4

Open in a new tab

This link has no visible inner text.

<a href="https://w3.org" aria-label="W3C homepage">
	<img src="/test-assets/shared/w3c-logo.png" alt="w3c logo" />
</a>

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.

Explicit Semantic Role

The explicit semantic role of an element is determined by its role attribute (if any).

The role attribute takes a list of tokens. The explicit semantic role is the first valid role in this list. The valid roles are all non-abstract roles from WAI-ARIA Specifications. If the element has no role attribute, or if it has one with no valid role, then this element has no explicit semantic role.

Other roles may be added as they become available. Not all roles will be supported in all assistive technologies. Testers are encouraged to adjust which roles are allowed according to the accessibility support base line. For the purposes of executing test cases in all rules, it should be assumed that all roles are supported by assistive technologies so that none of the roles fail due to lack of accessibility support.

Focusable

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

Exception: Elements that lose focus and do not regain 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:

Implicit Semantic Role

The implicit semantic role of an element is a pre-defined value given by the host language which depends on the element and its ancestors.

Implicit roles for HTML and SVG, are documented in the HTML accessibility API mappings (working draft) and the SVG accessibility API mappings (working draft).

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.

Label in Name Algorithm

To check whether an element has its label contained in its name, follow this algorithm:

Let ‘label’ be the visible inner text of the target element. Let ‘name’ be the accessible name of the target element. Both ‘label’ and ‘name’ are strings.

Sub-algorithm to tokenize a string:

Then do the check: is the tokenized ‘label’ a sublist of the tokenized ‘name’?

If the answer is “yes” (that is: the tokenized ‘label’ is a sublist of the tokenized ‘name’), then this algorithm returns “is contained”. Otherwise, it returns “is not contained”.

Marked as decorative

An element is marked as decorative if one or more of the following conditions is true:

Elements are marked as decorative as a way to convey the intention of the author that they are pure decoration. It is different from the element actually being pure decoration as authors may make mistakes. It is different from the element being effectively ignored by assistive technologies as rules such as presentational roles conflict resolution may overwrite this intention.

Elements can also be ignored by assistive technologies if they are programmatically hidden. This is different from marking the element as decorative and does not convey the same intention. Notably, being programmatically hidden may change as users interact with the page (showing and hiding elements) while being marked as decorative should stay the same through all states of the page.

Outcome

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 five following types:

Note: A rule has one passed or failed outcome for every test target. When a tester evaluates a test target it can also be reported as cantTell if the rule cannot be tested in its entirety. For example, when applicability was automated, but the expectations have to be evaluated manually.

When there are no test targets the rule has one inapplicable outcome. If the tester is unable to determine whether there are test targets there will be one cantTell outcome. And when no evaluation has occurred the test target has one untested outcome. This means that each test subject always has one or more outcomes.

Outcomes used in ACT Rules can be expressed using the outcome property of the [EARL10-Schema][].

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

Semantic Role

The semantic role of an element is determined by the first of these cases that applies:

  1. Conflict If the element is marked as decorative, but the element is included in the accessibility tree; or would be included in the accessibility tree when it is not programmatically hidden, then its semantic role is its implicit role.
  2. Explicit If the element has an explicit role, then its semantic role is its explicit role.
  3. Implicit The semantic role of the element is its implicit role.

This definition can be used in expressions such as “semantic button” meaning any element with a semantic role of button.

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 Inner Text

(The “visible inner text” defined here is similar to, but not the same as, visible text content and [innerText][https://html.spec.whatwg.org/multipage/dom.html#the-innertext-idl-attribute].)

The visible inner text of a node depends on the kind of node.

The visible inner text of a text node is:

The visible inner text of an element is:

The visible inner text of any other node is the concatenation of the visible inner text of its children (in tree order in the flat tree).

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. (This is similar to, but not the same as, visible inner text.)

WAI-ARIA specifications

The WAI ARIA Specifications group both the WAI ARIA W3C Recommendation and ARIA modules, namely:

Note: depending on the type of content being evaluated, part of the specifications might be irrelevant and should be ignored.

Whitespace

Whitespace are characters that have the Unicode “White_Space” property in the Unicode properties list.

This includes:

whitespace: #whitespace ‘Definition of whitespace’ [widget role]: https://www.w3.org/TR/wai-aria-1.2/#widget_roles ‘Definition of Widget role’

Rule Versions

This is the first version of this ACT rule.

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.

Implementation Type Consistency Report
Axe DevTools Pro 4.37.1 Semi-automated tool Partial Axe DevTools Pro Report
Axe-core 4.10.2 Automated tool Partial Axe-core Report
Equal Access Accessibility Checker 3.1.42-rc.0 Automated tool Consistent Equal Access Accessibility Checker Report
QualWeb 3.0.0 Automated tool Consistent QualWeb Report
SortSite 6.55 Automated tool Consistent SortSite Report
Total Validator 17.4.0 Linter Consistent Total Validator Report
Total Validator (+Browser) 17.4.0 Automated tool Consistent Total Validator (+Browser) Report
Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.