Inactive Accessible View
Interactive views should be focusable with assistive technology.
Note: This rule has been renamed to Inaccessible Action.
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.
The version of Android, device, and manufacturer may play a part in issue detection.
Confirmation
- Turn on TalkBack or SwitchAccess
- 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 }}
/>