如何在 React Native 中访问嵌套文本元素中的链接? [英] How can I make a link in a nested Text element accessible in React Native?

问题描述

问题:我正在尝试使用 React Native 使链接在 Android 和 iOS 上均可访问.使用 VoiceOver 时，iOS 有一个转子，可以选择在屏幕上的链接之间切换，但不适用于以下元素:

Problem: I am trying to make a link accessible on both Android and iOS using React Native. iOS has a rotor when using VoiceOver that has an option to switch between links on the screen which does not work for the following element:

<Text>
Here is some text <Text accessible={true} accessibilityRole="link" onPress={() => Linking.openURL("https://www.google.com")}> Here is a link</Text>
</Text> 

在 Android 上使用链接选项在启用 TalkBack 的情况下搜索屏幕上的链接时会发生同样的事情.在上面的代码示例中，在打开 TalkBack 的情况下，在 Android 中双击不会打开链接，但在 iOS 中在打开 VoiceOver 的情况下双击句子可以打开链接.

The same thing happens on Android when using the Links option to search for links on-screen with TalkBack on. In the above code sample, double-tapping in Android does not open the link when TalkBack is on but in iOS double-tapping the sentence with VoiceOver on does open the link.

我尝试过的事情:我尝试过像这样拆分 Text 元素:

Things I've Tried: I have tried splitting the Text elements like this:

<View>
  <Text> Here is some text</Text>
  <Text accessible={true} accessibilityRole="link" onPress={() => Linking.openURL("https://www.google.com")}> Here is a link </Text>
</View>

这确实解决了 Android 上的问题，我可以双击链接并打开网页，当我打开 TalkBack 的链接选项时，它还允许我将其作为链接轻弹，但这不是最佳策略，因为它与我对视力正常的用户的句子格式相混淆.这也不会将链接项添加到 iOS 转子.鉴于这是一个可访问性问题，我还没有找到很多关于如何解决此问题的资源.

This does fix the issue on Android with me being able to double-tap the link and it opens the webpage and it will also allow me to flick to it as a link when I have the links option on for TalkBack, but this is not an optimal strategy because it messes with the format of my sentence for sighted users. This also does not add the link item to the iOS rotor. Given that this is an accessibility problem I have not found a lot of resources on how to fix this issue.

结论:我希望能够在链接位于 Android 上的嵌套文本元素中时单击该链接，并且我希望 TalkBack 上的链接控件能够正常工作.我还想在 iOS 上为转子添加链接选项.对于那些不熟悉 iOS 辅助功能转子的人，这里是一个 链接到有关 iOS 无障碍转子的信息 这里是本地/全局上下文的链接Android 上的可访问性菜单. 对此的任何建议将不胜感激.

Conclusion: I want to be able to click the link while it is in the nested Text element on Android and I want the links control on TalkBack to work. I would also like to add the links option to the rotor on iOS. For those unfamiliar with the iOS accessibility rotor here is a link to information on iOS accessibility rotor Here is a link for the local/global context menu for accessibility on Android. Any advice on this would be greatly appreciated.

推荐答案

我跟进了@verunar 在评论中发布的链接，发现这很可能是文本元素中内联链接的最佳答案.

I followed up with the link @verunar posted in the comments and found that this is most likely the best answer for inline links in text elements.

代码如下:

 <Text
      accessibilityRole="link"
      onPress={() =>
        AccessibilityInfo.isScreenReaderEnabled().then(
          enabled =>
            enabled && openURL('https://callstack.com/team/lukasz-walczak/'),
        )
      }>
      Check my activity on 
      <Text
        onPress={() => openURL('https://callstack.com/team/lukasz-walczak/')}
        style={styles.link}>
        Callstack's 
      </Text>
      webpage
    </Text>
 

基本上，它会检查屏幕阅读器是否打开，如果打开，则整个文本元素将打开 URL.如果屏幕阅读器不在，则只有实际的链接文本才会将您导航到链接的站点.这适用于 Android 和 iOS，让屏幕阅读器将文本识别为链接，但仅当只有一个内嵌链接时才有效.

Basically, it checks if the screen reader is on and if it is then the whole text element will open the URL. If the screen reader is not on only the actual link text will navigate you to the linked site. This works with Android and iOS to get the screen readers to recognize the text as a link, but it only works if there is only one inline link.

这篇关于如何在 React Native 中访问嵌套文本元素中的链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！