Skip to main content

Accessibility Role

The accessibilityRole is required for all interactive components to communicate their purpose to assistive technology users.

Expectation​

When using an accessibility role of button, the screen reader automatically announces "double tap to activate" after reading the accessibility label. Each accessibility role informs the user of the component type and available actions.

tip

React Native provides an extensive list of accessibility roles, but not all of them are native to both iOS and Android platform. For example checkbox is a native component on Android but not on iOS.

For those cases AMA automatically uses the correct role for the running platform.

Example​

<Pressable onPress={doSomething} accessibilityRole="button">
  Contact us
</Pressable>

Lack of accessibility role​

What's happen if we skip it? The lack of a value causes affects the Screen Reader behaviour:

  • VoiceOver only reads the component accessibilityLabel and accessibilityHint, if specified, or any text inside the component
  • TalkBack, besides reading the component accessibilityLabel and accessibilityHint, if specified, or any text inside the component, also adds "double-tap" to activate.

Example​

Let's consider the following example:

<Pressable onPress={doSomething}>Contact us</Pressable>
VoiceOverTalkBack
Contact usContact us, double-tap to activate

In both cases, the user has no clue about the nature of the component the screen reader landed on. VoiceOver users will have no clue that an action can be triggered, while Android ones won't know what could be the outcome of interacting with it.

AMA dev runtime errors ​

NO_ACCESSIBILITY_ROLE​

This error is used when a pressable element has no accessibilityRole defined.

note

This rule is mandatory and cannot be turned off!