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>