Label In Name

Link to Label In Name copied to clipboard

WCAG 2.1 - 2.5.3 A Impact - Serious

People using assistive technology should have the same understanding of labels as people not using assistive technology.

Supported within:
XML Layouts

Impact

People using TalkBack and or experiencing low vision are impacted most by issues detected. Issues can contribute to a confusing or conflicting experience between the announcement from TalkBack and the content on the screen.

Confirmation

  1. Turn on TalkBack
  2. Attempt to focus the control
  3. One of the following will happen:
    • Inaccessible: Text announced by TalkBack is different from the displayed widget's name.
    • Accessible: Text announced by TalkBack is the same or includes the displayed widget's name.

How to Fix

Native Android

Set a content description that either matches or contains the visible text. If the control is a Button or a clickable TextView:

Button button = .......
button.setText("Search");
button.setContentDescription("Search the store");

TextView textView = .......
textView.setText("Book Title");
textView.setContentDescription("Book title to search for");

If the control is a CheckBox, please see CheckBox Name.

React Native

Set an accessibility label that either matches or contains the component's visible text.

<Pressable
    accessibilityRole="button"
    accessibilityLabel="Search the store"
    onPress={...}
    <Text>Search</Text>
</Pressable>