Has Accessibility Role
This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data
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 />