Label In Name

An accessibility focusable view should ensure its name is included in its visible label.

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 widgets name.
   • Accessible: Text announced by TalkBack is the same or includes the displayed widgets name.

How to Fix

XML

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.

Compose

Ensure the widgets contentDescription contains the name of the view.

@Composable
fun EmailButton() {
    Button(
        modifier = Modifier.semantics { this.contentDescription = “Send an Email” }
        onClick = { … },
    ) { 
        Text(
            text = “Email”
        )
    }
}

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>