Visible labels should match the accessibility name

For user interface components with visual labels (text or images of text):

• The name in the code must include the text presented visually.

• Ideally, the text of the label should appear at the beginning of the accessibility name.

• A button visually labeled “Send” should have an accessibility name of “Send” rather than “Submit”.

• A search field labeled “Search” visually should have an accessibility name starting with “Search for a product”.

• Use the same text for both the visual label and the accessibility name to avoid confusion.

• If you are using images for labels, ensure that the alternative text (alt text) matches the visible text as closely as possible.

• Test with various screen readers and voice interaction tools to verify that the label and name are consistent and understandable.

• Use screen reader software to verify that the accessibility name announced matches the visible label text.

• Check that the text or image used as the label is accurately reflected in the accessibility name in the code.

• Confirm that accessibility tools and voice commands recognize and trigger the correct actions based on the visual labels.