Understanding 2.5.3 Label in Name
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:
- Label: A label identifies the control for all users and is visible to all users text immediately above, inside, or beside the element.
- Name: This is what assistive technology uses to tell the user what the element is. It can be programmatically determined. (Important note: The accessible name is different from the name attribute on input elements.) The name may or may not be visible. An example of a name is alt-text and aria-labels: they tell a screen reader what to say, but are typically not visible.
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.
Recommended Solutions
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.
