Has Accessibility Role
Link to Has Accessibility Role copied to clipboard
Rule ID: has-accessibility-role
Requires that Touchable components have an accessibilityRole prop to describe the role of the element to screen reader users.
Touchable components:
PressableTouchableOpacityTouchableHighlightTouchableWithoutFeedbackTouchableNativeFeedback
Why It Matters
When screen readers and other assistive technologies do not know the role of each element, they are not able to interact with it intelligently, nor are they able to communicate the role to the user.
How to Fix the Problem
Add an accessibilityRole to an accessible Touchable component.
Passing Examples
The TouchableOpacity component is accessible and has an accessibilityRole.
<TouchableOpacity accessibilityRole="button" />
The TouchableOpacity component is not accessible and does not require an accessibilityRole.
<TouchableOpacity accessible={false} />
Failing Examples
The TouchableOpacity component is accessible but does not have an accessibilityRole.
<TouchableOpacity />