Should visible labels and accessible names match exactly?

When UI components have visible labels, the visible label text must be included in the accessible name. So, if the visible label is "Send," then that should be reflected in the accessible name as well.

Also, if text is included in the accessible name in addition to the visible label text, it is best practice to have the visible label at the beginning of the accessible name. For example, you could have a visible label of "Send" and an accessible name of "Send form."

One common example where this impacts accessibility is for users who navigate the web with voice commands. When the visible label and accessible name match, that helps ensure that a voice command related to the element, such as "Click Send," will be interpreted correctly by assistive technology.

For a step-by-step checklist on reviewing the accessibility of labels and names, explore the Guided Manual WCAG Audit Tool from Accessible Web.