Should visible labels and accessible names match exactly?


I have a button with a visible label of "Send" and an accessible name of "Submit," which means basically the same thing. Does the visible label need to match the accessible name 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.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.