Label in Name - Success Criterion 2.5.3 (Level A)

Question

Does the visual text label (e.g. in menus, links, buttons, and form fields) match the accessible name in your site or application?

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.

Whom does it benefit?

Example 1

As a person who uses speech in-put software,
I want to use visual labels to assist me when speaking commands
so that I can navigate my courseware with ease.

Example 2

As a person with low vision who uses a screen reader,
I want to match what I hear my screen reader announce to what I see visually
so that I can track where I am without being confused or disoriented.

What should you do?

Ensure the visual label which includes text or images of text is associated with the component programmatically (i.e. accessible name).

How do you do it?

Best practice is to ensure the visual text label matches the accessible name.
At a minimum, include the text of the visible label as part of the accessible name, preferably at the beginning.