| id | 2ee8b8 | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| name | Visible label is part of accessible name | ||||||||||||||||||||
| rule_type | atomic | ||||||||||||||||||||
| description | This rule checks that interactive elements labeled through content have their visible label as part of their accessible name. | ||||||||||||||||||||
| accessibility_requirements |
|
||||||||||||||||||||
| input_aspects |
|
||||||||||||||||||||
| acknowledgments |
|
This rule applies to any element for which all the following is true:
- The element has a semantic role that is a widget that supports name from content; and
- The element has visible text content; and
- The element has an
aria-labeloraria-labelledbyattribute.
For each target element, the visible inner text is contained within the accessible name of the target element according to the [label in name algorithm][].
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] in most cases (enough cases to be useful) even though "label" is not precisely defined at this point in history.
This rule assumes that neither the label nor the visible inner text are rearranged with CSS in some way so that they appear to the user in a different order than they do in the DOM.
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).
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.
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".
- Understanding Success Criterion 2.5.3: Label in Name
- G208: Including the text of the visible label as part of the accessible name
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>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>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>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>The "X" is non-text content, so it doesn't need to be contained within the accessible name.
<button aria-label="close">X</button>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>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
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>Similar to the previous example.
<a href="#" aria-label="Some article by John Doe"><h6>Some article</h6><p>by John Doe</p></a>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>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>This example shows that the [label in name algorithm][] handles many kinds of whitespace.
<a aria-label="compose email" href="#">compose <br> email</a>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>The 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>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 💡">>>> ** Submit ** <<<</button>The "X" is non-text content.
<button aria-label="Close">X</button>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>This button has visible inner text that is only partially contained within the accessible name.
<button aria-label="the full">The full label</button>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>This link's accessible name contains two tokens (according to the[label in name algorithm][]) and the visible inner text contains one token. So it fails the rule.
<a aria-label="just ice" href="#">justice</a>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>The rule has no special handling for acronyms or initialisms.
<a aria-label="WAVE" href="#">W A V E</a>The rule has no special handling for abbreviations.
<a aria-label="University Avenue" href="#">University Ave.</a>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×2=4</a>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>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>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="Call 1 2 3. 4 5 6. 7 8 9 0." href="tel:1234567890">123.456.7890</a>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>Similar to the previous example.
<a aria-label="fibonacci: 0 1 1 2 3 5 8 13 21 34">fibonacci: 0112358132134</a>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>(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>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>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>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>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" />This div element does not have a widget role, so the visible inner textt does not need to match the accessible name.
<div role="tooltip" aria-label="OK">Next</div>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>