Many HTML controls – like form inputs, buttons and so on – contain visible text labels and accessible names. To understand this criteria, you need to understand these two components:
People who rely on screen readers need to tell their technology the accessible name of the component so the software knows which one to activate. If the accessible name does not match the visible label, the user will not know what correct name to say.
Simply put, this criteria states that whenever you have a component with an accessible name, the label of that element must contain the name.
The best practice is to make your labels and names unique and matching one another, so there's no confusion what the user needs to say to their technology to interact with the component.
If you need to include more descriptive details in your non-visible accessible name, you may do so. Just make sure to always have the text of the label at the start of the visible name.
Here's an example. Imagine an e-commerce listing like this:
<button onclick="alert(Sneakers added to cart');" aria-label="Buy">Buy</button>
Here, if a user says "Buy" to add an item to their cart, the software won't know which item to add and no interaction will take place.
Let's say the button has a non-visible aria-label of "Buy Sneakers."
<button onclick="alert(Sneakers added to cart');" aria-label="Buy Sneakers">Buy</button>
Now, the software expects the user to say "Buy Sneakers" out loud in order to activate the button. This is great for speech input users, but visually impaired text-to-speech users who can see the "Buy" label won't know to say this.
So the best way to resolve this criteria is to make every single label visible, unique, and descriptive. Then, make your accessible name match your label, or a least start with the same text.
A more accessible listing would look like this:
<button onclick="alert(Sneakers added to cart');" aria-label="Buy Sneakers">Buy Sneakers</button>
Every button's label is unique and matches the accessible name. All users would know to say "Buy Sneakers" aloud, so the software can activate the correct button.