Has Accessibility Role

Link to Has Accessibility Role copied to clipboard
Free Trial

Rule ID: has-accessibility-role

WCAG 2.0 (A) 4.1.2

Requires that Touchable components have an accessibilityRole prop to describe the role of the element to screen reader users.

Touchable components:

  • Pressable
  • TouchableOpacity
  • TouchableHighlight
  • TouchableWithoutFeedback
  • TouchableNativeFeedback

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 />