Nested Active Control

An accessibility element should not have multiple active controls embedded within it. Each active control should be individually focused and interacted with.

Impact

People using TalkBack are most impacted. TalkBack can not activate more than one active control within another accessibility element.

Confirmation

1. Turn on TalkBack
2. Attempt to focus the control
3. Attempt to activate the control
4. One of the following will happen:
   • Inaccessible: A different control is activated.
   • Inaccessible: The control is activated, but its focus box contains another control.
   • Inaccessible: Nothing happens.
   • Accessible: The control is activated and is the only control in its focus box.

How to Fix

Avoid nested clickable elements. Make sure each clickable item is focusable by accessibility technology. Views that can be accessed without assistive technology should be available to anyone using assistive technology.

XML

Avoid setting the importantForAccessibility property to no on all clickable views nested inside a layout.

Compose

In the example below, remove invisibleToUser to ensure views are available to anyone using assistive technology. Note that the parent is clickable and may result in undesired behavior rather than engaging with 'Settings' or 'Information' views directly.

Row(modifier = Modifier.clickable { ... }) {
    Text("Settings", 
        modifier = Modifier.clickable { ... }
            .semantics { 
        invisibleToUser() 
    })
    Text("Information", 
        modifier = Modifier.clickable { ... }
            .semantics { 
        invisibleToUser() 
    })
}

A passing example would have all views be visible for integration with assistive technology with a parent that is not clickable:

Row {
    Text("Settings", 
        modifier = Modifier.clickable { ... })
    Text("Information", 
        modifier = Modifier.clickable { ... })
}

React Native

A control that is embedded within another control should not be interactable or focusable. The parent control should be focusable and clickable. To achieve this, ensure the parent element is accessible, and has a click action. The child component should have importantForAccessibility set to no-hide-descendants.

<TouchableOpacity
   style={{flexDirection:'row', alignItems: 'center',}}
   onPress={() => props.navigation.navigate('FocusableTextExample')}
   accessible={true}
   accessibilityLabel={"Purchase items in your shopping cart"}>
     <Button title="Buy"
       importantForAccessibility='no-hide-descendants'
       accessibilityElementsHidden='true'
       adjustsFontSizeToFit={true}
       marginBottom={20}
       titleStyle={{
         color: "white",
         fontSize: 20,
        }}
        buttonStyle={{
          height: 50,
          width: 200
        }}
     />
</TouchableOpacity>