Web Content Accessibility Guidelines a guide to the accessibility requirements
2 Operable

2.5.3 Label in Name

Conformance level: A
Criterion released in WCAG version: 2.1

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.

More about this criterion elsewhere