2.5.3 - Label in name
Benefits users with:
- speech-input users
- blindness/low vision who use screen reader
Intent
The intent of this success criterion is to ensure that the words which visually label a component are also the words associated with the component programmatically. This helps ensure that people with disabilities can rely on visible labels as a means to interact with the components.
Most controls are accompanied by a visible text label. Those same controls have a programmatic name, also known as the Accessible Name. Users typically have a much better experience if the words and characters in the visible label of a control match or are contained within the accessible name. When these match, speech-input users (i.e., users of speech recognition applications) can navigate by speaking the visible text labels of components, such as menus, links, and buttons, that appear on the screen. Sighted users who use text-to-speech (e.g., screen readers) will also have a better experience if the text they hear matches the text they see on the screen.
Ways to meet the criterion
For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
A best practice is to have the text of the label at the start of the name.
Examples
Speech input users
If the websites/applications have speech input feature, users can activate call-to-action using a speech input function.
Success
HTML example:
<button>Search</button>
Button label has appropriate name without additional accessible name (such as aria-label)
Not applicable
Note that where a visible text label does not exist for a component, this success criterion does not apply to that component.
Search button uses informative icon without visible text.
This is not applicable for this success criterion.
Please view other success criteria such as;
Failure
HTML example 1:
<button aria-label=“Find in this site“>Search</button>
HTML example 2:
<div id="hidden-label">Find in this site</div>
<input type="submit" aria-labelledby="hidden-label" value="search">
HTML example 1:
- The accessible name (aria-label) does not match visible name. So that the speech input function does not recognize the button.
- If you need to add accessible name, at least the full string of the visible words should match with the accessible name.
HTML example 2:
- The accessible name (aria-labelledby) does not match visible name. So that the speech input function does not recognize the button.
Screen reader with speech input users
A drag-and-drop interface allows users to sort vertically stacked cards by picking up one card with the pointer (down-event), move it to a new position, and insert it at the new location when the pointer is released (up-event). Releasing the pointer outside the drop target area reverts the action, i.e., it moves the card back to the old position before the interaction started.
Failure
<a href="#">Download <span class="accessibly-hidden">the City</span> information</a>
Screen reader reads the link "Download information” because there is invisible link text.
However, the accessible name of that link is "Download the City information”.
While the visible label text is contained in the accessible name, there is no string match which may prevent the link from being activated by speech input.
Testing principles
For all controls with a visible label (e.g., link text, button text, programmatically linked label, images in links with text), check that:
- The accessible name is the same as the visible label.
- The accessible name contains a match for the string of the visible label.
If checks #1 and #2 are false, the content fails the success criterion.