Label in name

Label in name guideline ensures that the text labels of user interface components match their accessibility label names. This helps maintain accessibility for users who rely on screen readers.

For example, if a button is visually labeled Log in, the accessibility label name should also include Log in so that it can be easily identified and activated by screen readers. When the visual text and accessibility label names do not match, it can lead to confusion and an inaccessible user experience for screen reader users.

Success criteria

The rule checks for the following potential violations:

• The accessibility label name of a UI component does not contain the visually presented text.

How to fix?

To prevent label in name violations, ensure the accessibility label contains the text presented visually.

Example

The following example scan report highlights label in name violation. A button is visually labeled as test button, but the accessibility label name (content description) is set as Content description for my button. This violates the label in name guideline because the accessibility label name does not include the exact text that is visually presented.

Fix

• Update the accessibility label name to include the exact text test button.
• Ensure that the content description is updated to match the visually presented text, such as, contentDescription: test button.

Reference

• Learn more about Label In Name WCAG: 2.1 - 2.5.3 (Level A) guideline.
• Learn more about Label In Name WCAG: 2.2 - 2.5.3 (Level A) guideline.