For user interface components with labels that include text or images of text, the Accessible name contains the text that is presented visually.
Why is this a problem?
The ‘name’ is text by which software can identify a component within Web content to the user. The ‘Accessible Name’ is text in the DOM that is understood by both the AT (like a screen reader) and the browser. This is often hidden in code.
These need to match so that:
- Speech input users can activate controls on a page.
- Text-to-speech users will have a better experience because the labels that they hear match the visible text labels that they see on the screen.
Accessibility Requirements for 2.5.3 Label in Name (A)
The accessible name can be the ‘label’ used on a form input. This can be provided by the label element in HTML or by an aria-label or similar. There are other ARIA and HTML elements that can provide the accessible name for a component.
Ensure that the:
- Accessible name matches the visible label: The accessible name and visible label of a control match.
- Accessible name starts with visible label: The accessible name of a “Start here” button begins with the same text as the visible label.
Common mistakes for 2.5.3 Label in Name (A)
- The Accessible name does not contain the visible label text
- The Accessible name contains the visible label text, but the words of the visible label are not in the same order.
- The Accessible name contains the visible label text, but there are extra words in the label.
Techniques for 2.5.3 Label in Name (A)
Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see Understanding Techniques for WCAG Success Criteria, particularly the “Other Techniques” section.
Failures for 2.5.3 Label in Name (A)
The following are common mistakes that are considered failures of this Success Criterion by the WCAG Working Group.
- F96: Failure due to the accessible name not containing the visible label text
- @@ Accessible name contains the visible label text, but the words of the visible label are not in the same order as they are in the visible label text
- @@ Accessible name contains the visible label text, but one or more other words are interspersed in the label
FAQs for Label in Name (A)
What are the objectives of Label in Name
1.Ensure that the text label and programmatic name of components match.
2.Abort actions where the pointer is released outside the boundary of the target.
What are the exception for this guideline?
We do not use Label in Name:
1.Where there is no visible label for a component.
2.Where text is used symbolically, for example ‘ABC” used to indicate a spellchecker.
Labels include:Text to the left of dropdown lists and text inputs
Text to the right of checkboxes and radio buttons
Text inside buttons and tabs
Text below icons used as buttons
Programmatic names include alt text, aria-label and aria-labelledby attributes.
Programmatic names can be simplified versions of the display text if they begin with the same word. For example, ‘Search this page’ could use a name of ‘Search’.
When deciding how much text counts as a visual label, take a commonsense approach. The text immediately adjacent to the control will be enough.
Why is this important?
Some users rely on speech recognition software to interact with their devices. Using voice commands, they can navigate a page, select links, and fill in form fields. To do this, visual labels help the user provide the command (e.g. “select submit”). However, if the submit button is coded with another name such as “send” no interaction will happen. This is why ‘Label in Name’ is important. In order for speech recognition software to work properly with assistive technology, the visual text label should match or be included in the accessible name.