The element has an aria-label or aria-labelledby attribute.
Expectation
For each target element, all text nodes in the visible text contentmatch characters and are contained within the accessible name of this target element, except for characters in the text nodes used to express non-text content. Leading and trailing whitespace and difference in case sensitivity should be ignored.
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 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.
This button has visible text that is contained within the accessible name.
<buttonaria-label="Next Page in the list">Next Page</button>
Passed Example 5
This button has visible 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.
<buttonaria-label="anything">X</button>
Passed Example 6
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.
This button has visible text that is only partially contained within the accessible name.
<buttonaria-label="the full">The full label</button>
Failed Example 3
This link has visible text with mathematical symbols, that does not match the accessible name because the mathematical symbols were written out in the accessible name. This is explicitly mentioned in WCAG.
<ahref="/"aria-label="Proof of two multiplied by two is four">Proof of 2×2=4</a>
Failed Example 4
This link has visible text does not match the accessible name because there is a hyphen in the accessible name.
This nav is not a widget, so the visible text does not need to match the accessible name.
<navaria-label="main nav">W3C navigation</nav>
Inapplicable Example 2
This email text field does not need to have its visible 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.
