2.5.3 Label in Name
Official description of the success criterion
For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
What to do?
Ensure labels include the text that is visible on the screen.
Why is it important?
Supports speech recognition technologies and ensures consistency for all users.
Common pitfalls
Use of ARIA attributes to override, for example, card element content. In this kind of a case, often aria-label attribute is used and it's only given some of the card content, like the heading.
Another common issue is in situations where the developer tries to give the screen reader user some extra context, for example, in a link. The implementation often lacks the realisation that the visible content must be in the ARIA markings as it is. So you can't add content inside the visual content or change its order in any way. You can add extra content after the visible content, that is more than ok. Technically you also could add extra content before the visible content, but that is not recommended because it can easily cause issues with speech recognition.
How to test for it?
Automated tools can find some issues with this.
One option is to compare the visible texts with the accessible name in the HTML markup. I prefer to use a screen reader to navigate the elements manually. This doesn't require HTML knowledge and usually also takes less time.
How to take this criterion into account in development?
This often boils down to trying to make elements shorter for screen readers. So avoid doing that. If a card has a title, date, image and some short introduction, these all should be available to screen readers just as they are available to sighted users.
If you want to add extra information for screen readers, ensure you have the whole visually displayed content as is in the beginning. And after that, you can add more content. Sometimes the sentence structure would be better by adding a thing in between the visual content, but that just isn't allowed. In those kinds of cases consider if that content could be present there for sighted users as well. Note, sometimes it is much easier to add visually hidden text and skip using aria-labels. That way you have more control over the content. After implementing these, always remember to check the result with an automated tool!