Inaccessible Action

Interactive views should be focusable with assistive technology.

Note: This rule was formerly named Inactive Accessible View.

Impact

Issues found by this rule impact anyone using assistive technology. Inability to interact with control while using assistive technology (AT) when the same control can be interacted without AT is an issue.

Confirmation

1. Turn on TalkBack or SwitchAccess
2. One of the following will happen:
   • Inaccessible: The view is unable to be focused and or interact with.
   • Accessible: The view is focused and available to interact with.

How to Fix

XML

Avoid setting the importantForAccessibility property on tappable views with meaningful information to no. Views that people can access without assistive technology should be available for those using assistive technology.

Compose

Avoid marking tappable Compose views with meaningful information as invisibleToUser. Views that people can access without assistive technology should be available for those using assistive technology.

In both examples below, remove invisibleToUser to ensure views are available to people using assistive technology.

Button(onClick = {  },
    modifier = Modifier.semantics {
        //Remove the below API to make it accessible
        invisibleToUser()
    }
) {
    Text("Click here")
}


FloatingActionButton(onClick = {  }) {
    Image(
        painter = painterResource(id = R.drawable.floating_button),
        contentDescription = "floating button",
        Modifier.semantics { 
            //Remove the below API to make it accessible
            invisibleToUser() 
        }
    )
}

React Native

This accessibility issue cannot occur on most touchable or pressable controls in React Native; however, this issue can occur with some custom active controls.

Option 1: Allow parent view to handle focus Set the containing view's accessible property to true and it's accessibilityElementsHidden property to false. Assign the appropriate accessibilityRole to match the expected behavior. These properties will allow the custom control to be activated by assistive technology.

<View
  accessible={true}
  accessibilityElementsHidden={false}
  accessibilityRole='link'
  accessibilityLabel='Learn more about Deque'
  onTouchStart={openLink}
>
  <Image 
    source={DequeLogo}
    style={{ width: 100, height: 100 }} 
  />
</View>

Option 2: Allow element to handle focus On the control, set the accessible property to true, the accessibilityElementsHidden to false, and assign the appropriate accessibilityRole to match the expected behavior. These properties will allow the custom control to be activated by assistive technology.

<Image
  source={DequeLogo}
  accessible={true}
  accessibilityElementsHidden={false}
  accessibilityRole='link'
  accessibilityLabel='Learn more about Deque'
  onTouchStart={openLink}
  style={{ width: 100, height: 100 }}
/>