2.5.3 Label in Name: For user interface components with labels that include text or images of text, the name contains the text that is presented visually. (Level A)
A best practice is to have the text of the label at the start of the name.

Requirements

• Every interactive component must have a name that assistive technologies (like screen readers or speech input software) can understand. That name of a component that is exposed to assistive technologies is called its ‘Accessible Name’.
• Ideally, the ‘Accessible Name’ of a user interface component should be the same as the name of that component that is displayed on screen (for example, the label of a button or text input field).
• If it’s not possible to make the visible name and the ‘Accessible Name’ the same, then make sure that the ‘Accessible Name’ at least includes the name that’s visible on screen and try to make ‘Accessible Name’ start with the name that’s visible on screen.

Notes:

1. In some cases, an element’s ‘Accessible Name’ and its visible name are automatically the same, like the text of a button or the label associated with a text input field. But in other cases that’s not automatic.
2. There are also cases where you might want to make the ‘Accessible Name’ more descriptive that the text visible on screen so that it makes sense out of the visual context.
   • For example, the ‘Accessible Name’ of a ‘Buy’ button that is positioned next to a Harry Potter book might be ‘Buy Harry Potter and the Philosopher’s Stone’.

Why is it important?

When a user interface component’s ‘Accessible Name’ matches the name visible on screen, then:

• 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 screen.

Benefitted disability types

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.

Summary

When an interactive control has a name on screen, make sure that assistive technologies (like Voice Control) know it by the same name (or a name that includes the name on screen).
The name by which assistive technologies know a user interface component must match the name that users see on screen for that component.

Common mistakes

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

Design Guide

• On your designs, write what the ‘Accessible Name’ of interactive components should be, whenever it’s not the same as the visible name
• If the ‘Accessible Name’ and the visible name are different, make sure that the ‘Accessible Name’ starts with the visible name

References

1. Knowability – Article on ‘Label in Name’ with examples
2. Accessibility Guidelines- Github.io