Label In Name

An accessibility focusable view should ensure its name includes 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

The accessibilityLabel property should either match or contain the component's visible text.

By default, a button will use its title as its accessibilityLabel, and will therefore pass this rule.

<Button 
   title={'Menu'}
   mode='contained'
   accessibilityLabel='Menu'
/>

For interactive elements without a title, use a touchable view that contains the control and text components. In this manner, the text component becomes the visible label for the control. Set the containing element's accessibilityLabel to either match or contain the visible text.

<TouchableOpacity
   style={styles.switchRow}
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel='Dark Mode'
   accessibilityValue={{ text: "" + isEnabled }}
   accessibilityRole='switch'
   onPress={() => { 
     setIsEnabled(!isEnabled)
   }}> 
     <Text style={{ fontSize: 22 }}> 
        Subscribe
     </Text>
     <Switch
        trackColor={{ false: 'lightgray', true: 'dimgray' }}
        ios_backgroundColor={'lightgray'}
        thumbColor={'white'}
        accessibilityElementsHidden={true}
        importantForAccessibility='no-hide-descendants'
        value={isEnabled}

         onValueChange={() => {
           setIsEnabled(!isEnabled);
         }}
     />
</TouchableOpacity>