Accessibility Role
The accessibilityRole is required for all interactive components to communicate their purpose to assistive technology users.
Expectations
- When: The user focuses the component
- Then: The Screen Reader reads out the label
- And: The Screen Reader reads out the role
- Then: The Screen Reader reads out the label
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.
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>
| VoiceOver | Talkback | |
|---|---|---|
| Contact us, button, double tap to activate | Contact us, button, double tap to activate | Good |
Lack of accessibility role
• Severity: CriticalWhat 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>
| VoiceOver | TalkBack | |
|---|---|---|
| Contact us | Contact us, double-tap to activate | Wrong |
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.
This rule is mandatory and cannot be turned off!