Skip to main content

Accessibility Role

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

Expectations

Assistive Technology: Screen Reader
  • When: The user focuses the component
    • Then: The Screen Reader reads out the label
      • And: The Screen Reader reads out the role

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>
VoiceOverTalkback
Contact us, button, double tap to activateContact us, button, double tap to activateGood

Lack of accessibility role

• Severity: Critical

What happens if we skip it? The user will have no or little clue about what happens if they trigger the component:

Example

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

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 MUST

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

note

This rule is mandatory and cannot be turned off!