Skip to main content
Logo Appt Light

Accessibility link on React Native

Links should be accessible for users of assistive technologies. When accessibility is not taken into account, users might not be able to find or activate links.

In React Native, links should have their accessibilityRole set to link. You can use accessibilityLabel or accessibilityHint to provide additional context.

To create text links, you can embed a Text component inside a Pressable component.

The Linking API can be used to open links.

<Pressable
  onPress={async () => {
    const supported = await Linking.canOpenURL(url);
    if (supported) {
      await Linking.openURL(url);
    }
  }}
  accessibilityRole="link"
  accessibilityLabel="Appt"
  accessibilityHint="External link"
>
  <Text>Appt</Text>
</Pressable>

Feedback?

Let us know!