When to use accessibilityRole='link' in ReactNative?

Question

I have an application with drawer navigation that uses buttons to navigate to different screens. In terms of accessibility, should I use accessibilityRole='button' or accessibilityRole='link' for the buttons.?

React Native AccessibilityRole docs say

link Used when the element should be treated as a link.

For external links accessibilityRole='link' is clearly the best option. But should I use it for internal navigation, too?

Note: I do not use deep links in my application.

Thank you for your help.

Answer 1

The Link component

renders a component that can navigate to a screen on press.

The Button component is a component that performs a certain action if the user presses it. A Button could be considered a Link if its onPress function navigates to a screen, by definition of the Link component. The Link could be styled to look exactly like a Button and vice versa. There would be no difference.

If we refer to general URL linking which includes deep linking , then we notice that the link functionality needs a UI component as well in order to function. This could be Markdown, the Link component or again the Button.

I personally would use accessibilityRole='button' for every UI component that is the actual Button component or functions (and 'looks') like a button in my application ( TouchableOpacity , Pressable , ...), since this is what a user whose disability prevents him from noticing needs to know or wants to visualize. This includes the Drawer buttons .

I would use accessibilityRole='link' for text which is styled too look like a link (text with some highlighting) and navigates somewhere (this could be a website as well).

In general, I would keep in mind that the user wants to visualize the component. While a button, that navigates to a screen, is technically a link by definition of its functionality, it is not a 'typical link' when speaking of visual appereance (but again, we could style our button exactly like that...).

What is generally more important is the accessibilityHint which

helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.

The 'what will happen if I click' is certainly more important than 'what the component looks like'.